Author: Mark

  • Using @at-root to break out nesting in SASS

    An example would be a close button, where it’s primary goal is to close an overlay but it could be used in other cases maybe like a popup and so you don’t want to restrict it to be a parent of the modal and want all close buttons to be styled the same.

  • Using Context in React

    Using context allows access of certain data within all components inside the “provider” without having to pass them as props to the children. First create the context: Then make the provider: Here, we import the context, and set up the data we want to share in the state and also a function that toggles the…

  • Using the children prop

    This allows you to put children elements directly in the output:

  • Storing multiple values in useState

    Here’s an example: When updating you need to use “…[object name]” so the other value(s) stay in tact.

  • Reaching level 50 in Pokemon Go – Part 6

    Well, a lot has changed since my last post on Pokemon Go. I currently have over 200 million experience which is 10 times what you need to get to level 40. More importantly though, they added level 50 to the game so all that experience came to use. To get to level 50 you need…

  • Populating data with React

    If the file is local (eg. the file config/updates.json below): you can just import it: The constant ‘updatesData’ would give you a list of the data. You can put it as a prop in a component, map through it etc: If the data is external: where updatesData is a state. If you need it to…

  • Basic React Function Component

    This is a copy of this post, but using a function component and hooks.

  • Setting State in a setTimeout method

    If you do: You’ll get an error saying “this.setState is not a function”. To fix it for a class function, put it in a function (in this case handleClick() ), bind it in the constructor and use an arrow function in the setTimeOut: For a function component, also use an arrow function but you’ll also…

  • Looping through an object with forEach

    With example data like this: which console logs “bird”

  • Making React use relative paths

    If you build something and then upload it to www.website.com/newFolder and it breaks, you need to make it relative. To do this, just add to your package.json and rebuild.