DEV Community: Laura Todd

Using the useContext hook in React

Laura Todd — Sun, 24 Jul 2022 13:55:10 +0000

Sometimes when you're building an app in React, it can be difficult to pass props from one component to another without prop drilling. One of the in-built tools that React has to tackle this issue is the useContext hook.

The React's Context allows you to wrap your components in a context provider. The values which you need to share throughout your components can then be initialised at the top level and then accessed in any component using the useContext hook.

Let's take a look at a simple example.

Let's say we have an App which contains two components - one is a text input and the other is a component which will display the value that the user enters.

Here's the file structure.

Unfortunately, we can't simply pass the input value between the Input and Result siblings. In reality, in this very simple example, the best way of dealing with the issue would be to lift the state to the App component and then pass it down to each of the child components. But let's say you were building a more complex app and you needed to pass the state down several levels of the component tree while avoiding prop drilling - that's where Context comes in.

The starter files for this example can be found here.

First, we want to create a new file and create our context using React.createContext.

import * as React from "react"

export type InputValues = {
  nameValue: string
  setNameValue: React.Dispatch<React.SetStateAction<string>>
}

export const InputContext = React.createContext<InputValues>({
  nameValue: "",
  setNameValue: () => console.info("Name not yet initialised"),
})

In the createContext object, you will need to add and initialise any values that you need to. Here, we've set up nameValue which will be used in the Result component to display the name and the setNameValue which will be used to set the value in the Input component.

Next, we'll create our own hook which we can use later in the provider.

import * as React from "react"

import { InputValues } from "./input-context"

export function useInputProvider(): InputValues {
  const [nameValue, setNameValue] = React.useState("")

  return {
    nameValue,
    setNameValue,
  }
}

Here, we simply set up nameValue and setNameValue with the React useState hook and return them to use in our next step.

Now we need to go to our App file and wrap our Input and Result components in a context provider.

import { Input, Result } from "./components"

import { InputContext } from "./context"
import { useInputProvider } from "./context/use-input-provider"

function App() {
  const nameValue = useInputProvider()

  return (
    <div className="inputForm">
      <InputContext.Provider value={nameValue}>
        <Input />
        <Result />
      </InputContext.Provider>
    </div>
  )
}

export default App

So, we use the InputContext that we set up in the first step and wrap the child components in the provider. We can then use the useInputProvider hook that we set up in the second step to pass nameValue and setNameValue as the Provider value.

Now that we've set up the provider, how do we access the values in our child components?

First, let's go to our Input component.

import * as React from "react"
import { InputContext } from "../context"

export function Input(): JSX.Element {
  const { setNameValue } = React.useContext(InputContext)

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setNameValue(e.target.value)
  }

  return (
    <form>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" name="name" onChange={handleChange} />
    </form>
  )
}

Here, we need to access setNameValue in order to set the name value to whatever the user types in the input field. To do this, we can use the useContext hook and pass in our InputContext. You can then extract setNameValue like this -

const { setNameValue } = React.useContext(InputContext)

You can then go ahead and use setNameValue to take in the input value.

Finally, let's go over to our Result component and access nameValue in the same way using useContext.

import * as React from "react"
import { InputContext } from "../context"

export function Result() {
  const { nameValue } = React.useContext(InputContext)
  return <div>{nameValue}</div>
}

We can then pass the nameValue into the <div> to display the result.

And that's it! You can find the completed code here.

The Best Colour Palette Tools

Laura Todd — Sun, 06 Jun 2021 11:52:12 +0000

Colour is such an important aspect of web design. It can set a mood, highlight important elements and ensure consistency in your branding.

Unfortunately, I'm terrible at choosing a colour palette. If I select colours at random to use in my projects, it ends up looking like a dog's dinner. Thankfully, there are plenty of tools out there to help you find shades that compliment each other. I'll take you through the ones I use the most.

Canva

Canva has a huge range of colour schemes, each of 4 colours. You can browse through or search by colour, theme or keyword to find the palette to suit your project.

There's even a feature which allows you to upload a photo and Canva will pick out the prominent colours for you.

If you already have a particular colour in mind that you want to use, there's the colour wheel tool which allows you to enter the hex code and generates a series of palettes that work with that colour depending on what you're trying to achieve. You can choose to find a complimentary, monochromatic, analogous, triadic or tetradic set.

url: https://www.canva.com/colors

Coolors

Coolors generates random colour palettes when you hit spacebar. If you spot a colour you like the look of, you can lock it in place and continue hitting spacebar to find other colours to go with it.

If you find a colour or even an entire palette that you like but want it a little more saturated or bright, you can adjust them with the 'Adjust Palette' tool.

A great feature of Coolors is the gradient maker. Choose two colours and create a gradient between the two (either radial or linear), it then generates the CSS for you so that all you have to do is copy and paste it.

url: https://coolors.co/

Colormind

Much like Coolors, Colormind, allows you to generate different colour palettes randomly and lock in place any colours you particularly like.

In addition to that, it makes suggestions of how to use each colour within your site - great for those of us who need a little extra help in that area.

url: http://colormind.io/bootstrap/

Colorable

Colorable isn't quite as 'all singing, all dancing' as most of the other tools on the list. However, it does one thing particularly well - it generates paired colours, showing the page text in one colour and the background in the other. This is particularly good for web design as you can immediately get a feel for the way the colours work on a webpage.

You can also add in one of your own colours to find something that will work well alongside it.

url: https://colorable.jxnblk.com/021b00/7251ac

Happy Hues

Similarly to Colorable, Happy Hues gives you an idea of how varying colour palettes will look on a webpage but with a palette of 5 rather than 2 colours.

It has a range of curated colour palettes and suggests how, and on which elements, you could use them on a generic website.

url: https://www.happyhues.co/palettes/12

Of course, there are plenty of other tools out there but these are just some that I use regularly. If you know of any other good resources out there why not add it in the comments section?

Using the Google Maps API in React

Laura Todd — Sun, 23 May 2021 14:54:51 +0000

The Google Maps JavaScript API is a great way to include an interactive map on your website and gives you heaps of options for controlling and customising it. In this post, I'll take you through how to create a map with multiple, customised markers and info windows which appear on click.

We'll end up with something like this -

To do this exercise, you'll need your own API key from Google. Since I only really want to concentrate on getting the map working in React, I'm going to assume you already have one. If you don't, and don't know how to get one, this video shows you how.

We'll start off with a basic React app. You can find the starting code here.

Create a new file called 'properties.json' this is where we'll keep the data for each of the properties we want to show on our map.

Next, install 'react-google-maps'.

Now we need to create our Map component. Make a 'components' folder and inside, add a new file called 'Map.js'. In this file, import 'GoogleMap', 'withScriptjs', 'withGoogleMap', 'Marker' and 'InfoWindow' from 'react-google-maps'. Then create two functional components - 'MapComponent' and 'Map'. Only export 'Map'.

Underneath the 'MapComponent' we need to use the 'withScriptjs' and 'withGoogleMap' functions to wrap the 'MapComponent'. We can then return the 'WrappedMap' inside the 'Map' component.

Now, go back to the 'App.js' file and import your Map component. Render the map component wrapped in two 'divs' like so -

Then, add the following CSS to the stylesheet to display the map at 800 x 500px (or whatever size you'd like).

Next we need to pass in some properties to the wrapped map. Firstly, the 'googleMapURL' property should be set to https://maps.googleapis.com/maps/api/js? v=3.exp&libraries=geometry,drawing,places&key=[YOUR_API_KEY] with your own API key replacing [YOUR_API_KEY].

Then, the 'loadingElement', 'containerElement' and 'mapElement' should all be styled to 100% height to ensure that they take up the whole of their container.

Now let's import our 'properties.json' file as 'properties' and go back to our 'MapComponent' component.

We can add in some <GoogleMap> tags and enter the 'defaultZoom' and 'defaultCenter' properties. These are pretty self explanatory - 'defaultZoom' is how far the map is zoomed in when it first renders and 'defaultCenter' is the co-ordinates that the map centers on when it first renders.

Next, we can use the values from our json file to create the markers on our map.

Inside the <GoogleMap> tags, use the map() array method to render a <Marker> for each property, grabbing the id value and the lng and lat values for each one. If you run your app at this point, you should see the default red Google Maps markers.

Next, we can add our own custom icons as markers by adding the 'icon' property. Set the 'url' for your icon and set the 'scaledSize' to 'new window.google.maps.Size(25, 25)'. This will make your icons 25px x 25px.

Finally, we can set up our info windows. In order to do this, we need to know which of the markers is being clicked so that we know which of the windows to show. So lets add an onClick event listener to our markers and use useState to set the selected property.

Now we can use our 'selectedProperty' to render an with information about our selected property.

That's it! Now you have a map, with multiple custom markers and info windows which display on click.

You can check your final code here.

A Really Simple Intro to Redux

Laura Todd — Sun, 16 May 2021 13:58:48 +0000

In a previous post, I took you through using React's Context API as a way to pass data between sibling components. This time, we'll take a look at an alternative way of doing the same thing using Redux.

Redux is a useful tool which can be used to store state so that it can be used anywhere within your app.

In this example I'll show you how to make a really simple two-page app in which, on the 'Home' page, the user can save items from a list. Then, when they go over to the 'Saved' page, the saved items will be displayed and can also be removed from there.

So here's our 'Home' page -

And if we click to save 'Cow' and 'Pig', then go over to the 'Saved' page, we'll see this -

I won't go through setting up the app as I just want to focus on Redux in this post. We'll start off with a 3 Components - the Navbar, the Home page and the Saved page. You can find the starting code here.

To begin, lets install the dependencies we'll need - 'redux' and 'react-redux'.

Next we need to set up our files. When using Redux there are quite a few files you'll need to create so it's a good idea to create a new folder to keep them all in. We'll call our folder 'redux'.

Create a new file called 'rootReducer.js'. Here we'll create our root reducer function and by importing 'combineReducers' from Redux it means that if we needed to add a variety of different reducers to our app, they could all run from one function. We'll leave the function empty for the moment as we need to create another file to import into the function.

Now, create a file called 'store.js'. This will be where our state is stored. We need to import 'createStore', 'composeWithDevTools' and the 'rootReducer' that we just created. Then, we call createStore and pass in the rootReducer.

Next, let's go over to our index.js file and import 'Provider' and the store we just created. We need to wrap the entire app with tabs and pass in our store so that the entire app can communicate and use information from the store.

Now let's go back over to our redux folder and create another folder within that called 'save'.

Create a file called 'saveTypes.js' and create two action types. In our case, we only have 2 actions to create - we want to save an item and we want to remove an item from the saved items. We'll call the actions 'SAVE_ITEM' and 'REMOVE_ITEM'.

Now create another file in the 'save' folder called 'saveActions.js'. Here, import the actions we've just created, then create a function for each action. The functions will return an object with two values - the 'type', which will be the action imported from our 'saveTypes' file and the 'payload' which will be the data we want to get and store from the action. In our case, we want to get the id of the selected item.

The final file we need to create in the 'save' folder is 'saveReducer.js'. This is where the action happens!

Begin by importing the action types from the 'saveTypes' file. Then create an object which initialises the state. First, we want to have a state called items which is an object array of all the items. Secondly we want to have a state for the saved objects. Since we don't want any of the items to be saved when we start, we can initialise this as an empty array.

Next, let's create our saveReducer function and pass in our parameters of state and action. We want to use our INITIAL_STATE as the state so we can add that to the parameters too.

Within the function, we create a switch statement which checks for the action being used. Our default will simply return 'state'.

First, let's add the SAVE_ITEM action. This action will be used when we click the 'Save' button for any of our animals. When that happens, we want to check for the id of that animal and then add it to the 'savedItems' array.

To do that, we can use the find() method to get the object from our 'items' array whose id matches the id of the selected item (action.payload.id).

We then need to check whether that animal has already been saved as we don't want to add it to our 'savedItems' array twice. Again, we can use the find() method to search the savedItems array.

Now, in our return statement, we can use the spread operator to get our state (...state) and then update our 'savedItems' state. We can use a ternary operator which uses our 'alreadySaved' value and, if the item hasn't already been saved, add the item to our 'savedItems' array. Else it returns the current state.

Next, let's add the case for the REMOVE_ITEM action. Here, we can simply use the filter method to remove the item whose id matches the selected animal.

Now we can go back over to our 'rootReducer' file and import the 'saveReducer' which we can now assign to our 'save' reducer.

Since our app is really simple and only deals with whether the items are saved or not, we only need to include one reducer ('save'). If we were creating a more complex app, we might have a number of reducers which is why we us the 'combineReducers' function. It allows us to combine all of the reducers into one file - the 'rootReducer' file.

Now that we have all the Redux files set up, we can start introducing the stored state into our components. Let's start by going over to our 'Home' component.

First, we need to get all of our items from the stored 'items' array so that we can map them on the page. Underneath our functional component, we'll add a new function called 'mapStateToProps' and pass in state as a parameter. This function will return the items stored in state meaning that we can use them in our component by using the key value 'items'.

Next, import 'connect' from 'react-redux' and use this function to connect the 'Home' component to the redux store.

We can then pass our 'items' array into the Home function and use the map() method to display the values on the page.

In order to save our items, we need to add the SAVE_ITEM action to our button by using the 'saveItem' function we created in the 'saveActions' file. First, import the function. Then, below our 'mapStateToProps' function, add a new function called 'mapDispatchToProps' and pass it into the connect function.

Where the 'mapStateToProps' function was retrieving information from the store, the 'mapDispatchToProps' function updates the information in the store.

Within the 'mapDispatchToProps' function we use the 'saveItem' function to get the id of the item and add it to the 'savedItems' array.

Now, pass 'saveItem' into the 'Home' component and add it to an onClick event in the button element, collecting the id of the animal being saved.

If we then go over to our 'Saved' component, we can repeat the same steps we used for the 'Home' component with some slight differences.

Instead of mapping the items in the 'items' array, we want to map the items from the 'savedItems' array and instead of using the 'saveItem' function on the button, we want to use the 'removeItem' function.

That's it! If you open up your app, you should be able to save and remove items from the Saved page.

You can check your final code here.

A Really Simple Intro to localStorage in React

Laura Todd — Sun, 09 May 2021 13:37:49 +0000

Saving information to local storage can be incredibly useful and can make for a far better user experience in your apps. Imagine if you had to log in from scratch every time you wanted to look at Twitter!

By using the localStorage method in React, we can make save certain information to the user's machine to save them re-entering it whenever they use our app.

I'll take you through a very simple example of saving a name and username from a form.

We'll begin with two input fields and a submit button, like so -

You can find the starting code here.

Add onChange and onSubmit event listeners to the input fields and the form as would normally.

In the constructor, initialise the state for 'name' and 'username'.

Then, create the onChange handler functions, allowing them to set the state of 'name' and 'username' to the input values.

Next, create the onSubmit handler function.

In the first line, we use a destructured array to assign this.state.name and this.state.username to the 'name' and 'username' variables. Then, we use the localStorage.setItem() method store those values as 'name' and 'username' to be accessed by the local storage later.

Make sure that you bind all three functions in the constructor.

Finally, we can use the localStorage.getItem() method within ComponentDidMount() to access the stored values and assign them to this.state.name and this.state.username on initialisation.

That's it! Now, when you enter values into the input fields and refresh the page, those values should remain in the fields.

You can check your finished code here.

A Really Simple Intro to Context in React

Laura Todd — Sun, 02 May 2021 09:28:53 +0000

In this post, I'll take you through a simple example of using React's context API to pass information between components.

Let's say we have a simple app with two components - one is an input (in this case a dropdown menu) and one which displays the result of the input.

Here's the structure of the app -

And we want to pass information between the siblings like so -

Please note: In reality, a far simpler way of passing information between siblings is by lifting state. I'm just using this example to keep things simple - you would only really use Context if the structure were more complex and you were having to pass props through a number of components. You can see my post about lifting state here.

Here's what we're aiming for -

The selected item from the dropdown menu appears below in the Result component.

You can find the starting code here.

The first thing we want to do is create a new file in our 'src' folder called Context.js -

In the Context.js file, import React and { createContext }. Then create a variable to contain createContext(). You can call the variable whatever you like but it's standard practice to use the word 'Context' within the name.

Next, create a class component called 'Provider'. Within the provider, we need to initialise the state of the 'season' value. We'll just initialise it to an empty string as it doesn't have a default value.

Then, within the render, we want to return our provider. We do this by adding tags (if you named your context something different, then use this name for the first part of the tag). Inside the tags, add {this.props.children}.

This class will live at the top level of our application and will store all the data that we want to share with other components. In order to do this, we need to add a value to the <Context.Provider> tags.

Within the value, we want to set state to be 'this.state'. Then, we'll add the function that we want to use to handle the change when the user selects an option from the dropdown menu. So, we'll add a handleChange function which sets the state of 'season' to 'event.target.value' (the option selected from the dropdown).

Now, we need to go over to the index.js file and add the Context.

First, import { Provider } from the Context file.

Then, wrap the App in <Provider> tags. This will ensure that the entire app has access to data in the Context file.

Now, lets go over to our Input.js file and import { Context } from our Context file.

Next, wrap the dropdown menu in <Context.Consumer> tags. This will allow the dropdown menu to access data from the Context file.

Now, we need to add the handleChange function that we created earlier in the Context file to the dropdown menu.

To do this, we create an anonymous function with context in the parameters. Then we can add an onChange event listener to the <select> tag and set the value to {context.handleChange}.

Finally, we need to go over to the Result.js file and allow it to access the state of 'season'.

We need to repeat the same steps we used for the Input.js file of importing { Context }, wrapping the component in <Context.Consumer> tags and creating an anonymous function.

This time though, we want to display the current state of 'season'. We do this by adding {context.state.season} within some paragraph tags.

That's it! Now when you select an option from the dropdown menu, it should display below.

You can check your final code here.

A Really Simple Intro to Lifting State in React

Laura Todd — Sun, 25 Apr 2021 11:07:51 +0000

When using React, you can easily share information downwards in the component tree. Using props, you're able to pass data from a parent component to a child component but how do you pass information from a child to a parent or even between siblings?

That's when we need to lift state. I'll take you through a basic example.

Lets say you have an App component with two child components. One is a dropdown menu which allows the user to choose their favourite holiday destination and the other is a coloured box which should display the user's choice.

You can find the starting code here.

So here's the structure of our app -

And we want to pass information from Dropdown.js to Chosen.js -

But we can't do that directly, so we need to get the information up to App.js and then down again to Chosen.js -

The way we do this is to set the state in App.js rather than in Dropdown.js. We do this exactly as we would if we were doing it within the child component.

Begin by initialising the state of the chosen option. You can call it what you like but I'm going to call it 'chosen'.

Next, create an event handler for the onChange event of the dropdown menu. This will set the state of 'chosen' to the chosen value from the dropdown menu -

Don't forget to bind the function in the constructor. So you should have this at the top of your App component -

Now we need to connect the event handler to the Dropdown component so let's go over to the Dropdown.js file and add the onChange property to the <select> tags. We do this by adding "{props.onChoose}". The "onChoose" part an be called anything you like, this will just be what you use as the property name within the App component.

Then we can go back to App.js and add the "onChoose" property to the Dropdown component and set its value to "{this.handleChange}" (the event handler that we set up earlier).

Next, let's go over to the Chosen.js file and "{props.choice}" within some <p> tags. This will display the chosen destination.

Finally, go back to the App.js file and add "choice={this.state.chosen}" to the Chosen component. This will mean that whatever the current state of "chosen" is will be displayed in the paragraph tags of the Chosen component.

Now, you can run your app and see your choice displaying in the blue box -

You can check your final code here.

A Really Simple Intro to React Router

Laura Todd — Sun, 18 Apr 2021 10:45:28 +0000

If you want to create a multi-page React app, the easiest way to navigate between pages is by using React Router. In this post I’ll take you through the steps of setting up a navbar for a simple app.

We’ll start off with three different components which will be three different pages in our app. You can call them whatever you like and put whatever content you like in each component. I’m going to call my components ‘Home’, ‘Products’ and ‘Contact’.

You can find the starting code here.

To begin, install React Router by typing ‘npm install react-router-dom’ in your terminal.

Once it’s installed, go to your index.js file and import { BrowserRouter } from react-router-dom.

Then wrap the whole app with <BrowserRouter> tags so that that every component has access to React Router.

Next, go over to your App.js file and import { Route } and { Switch } from react-router-dom.

Now add a Route for each page of your app and wrap them with <Switch> tags. The path should be the url path for your page and the component property takes in the imported component. The exact property ensures that the route only works if the path used is exactly the same as the given path property.

Now let’s make our navbar by creating a new file called Navbar and adding a functional component as you would normally.

Now import { Link } from react-router-dom.

Add the links to the Navbar using . The to property should match the path you set up for each page in the App component.

Finally, go back to the App.js file, import the Navbar component and add it to the App component.

That’s it! Now when you open your app, you’ll have a Navbar with links to each page.

You can check your final code here.

A Really Simple Intro to Changing Styling Using React State

Laura Todd — Sun, 11 Apr 2021 17:41:13 +0000

When using React, one of the easiest ways to make style changes to an element on an event is by using state.

In this example, we'll be looking at how we can change the corners of a button from pointed to rounded on click. I know this isn't something you're likely to be doing on a regular basis but it's a nice easy task, just to get to know the concepts.

From this -

To this -

To use this method, you'll need to be using a Class Component rather than a Functional Component.

Here's our starting .js file, with a simple button and some text.

And our starting CSS with some simple styling.

So how do we get it working so that the corners will be rounded when you click the button?

First, in our .js file, we'll need to add a new state. You can call this whatever you like but I've called it 'pointedCorners' in this example. Currently, the corners of the button are pointed so we can set the state of 'pointedCorners' to true.

Next, below the constructor, we need to add a new method which will handle the click and toggle the state of 'pointedCorners' between true and false depending on what the current state is.

We'll call our method 'handleClick' for obvious reasons. This checks for the current state of 'pointedCorners' and changes the state to be the opposite.

Be sure to bind your method in the constructor like so -

Binding ensures that 'this' is defined when you call the function.

We now need to link our method to the button so that the method runs when the button is clicked. Do this by adding {this.handleClick} to the onClick value in your button.

Next, we'll jump over to our CSS file. We need to add two classes which can be applied to the button depending on whether the 'pointedCorners' state is true or false. In this case, we'll add one which sets the corners to be rounded and one that sets the corners to be pointed.

Then we'll jump back over to the .js file. Within the render method, we need to add a new variable. We'll call ours 'toggleBtnClass'. The variable uses a ternary operator to check the current state of 'pointedCorners' and if it's true, the class is set to 'roundedButton', if it's false, the class is set to 'pointedButton'.

Finally, we need to set the className of the button to the 'toggleBtnClass' variable.

You should then have a button that changes when clicked.

You can find the GitHub repo for this exercise here - https://github.com/LauraToddCode/Changing-Styling-Using-React-State

A Really Simple Intro to useState in React

Laura Todd — Sun, 04 Apr 2021 16:23:19 +0000

When it comes to React hooks, useState is one of the most useful. It can be used to capture information that the user inputs and use it elsewhere in your app.

For example, you could use it to capture the option a user chooses in a dropdown menu or in a series of radio buttons or whether a checkbox is checked or not.

In this post, I'll take you through getting a user's text from a text input field with useState and displaying below.

First, create a new React app and fill it a labelled text input field and some empty paragraph tags, like so -

If you like, you can use the code from my GitHub repo here.

We're going to set the app up so that the user's input will appear in the paragraph tags and will update with every keystroke. We'll therefore use the onChange event listener.

So, our first step is to add "onChange=" to our input tag. We'll need to add an event handler function to handle that change (which we'll set up in a later step). For now, just add the name of the handler function you intend to make to the input tag, we'll call ours "handleChange".

Note: The naming convention for event handler functions is to use "handle" + "the event" - in this case "handleChange".

Since this post is all about useState, we should probably import it. We do this by adding ", { useState }" after React in the existing import statement for React.

Next, we need to add useState to our code like so -

Let's break that down a little bit. Starting with the right-hand side, useState() can take an argument which will be used as an initial state. So if we wanted to have some text in our paragraph tags to begin with, we could add it to the useState brackets.

For example

Would give us this, until we begin typing into the input box -

On this occasion, we don't want to initialise state so we'll just leave it as an empty string within the brackets - useState("").

Now, let's look at the left-hand side of the statement. useState() gives us an array with two values and uses array destructuring. If you're not familiar with array destructuring, you can take a look at an explanation in the MDN Web Docs here.

We've called the values in the array "name" and "setName" but you can call them whatever you like. There is a naming convention of using the same description for both values but with "set" at the beginning of the second value.

The first item in the array ("name") is going to be what we use to display or otherwise use the value given to use by the user.

The second item in the array ("setName") is going to be what we use to tell the app where we're getting the information from. We do this within the handler function.

Let's create that handler function now -

You'll recall that we added an onChange event listener to the input field earlier and gave it a value of "handleChange". Therefore, the input field will call the above function with every keystroke.

Within the function we have given "setName" (from the useState() function) a value. By using "event.target.value", we assign the user's input text to "name".

Finally, we can add the "name" value to the paragraph tags and it will update as the user types in the input field.

You can check your code here.

Try and think of other ways that you can use useState() and practice them. The more you do it, the more it will become second nature. You'd be amazed how often this hook can be used in your apps.

A Really Simple Intro to Using Props in React

Laura Todd — Mon, 29 Mar 2021 13:47:26 +0000

Props are an incredibly useful tool when working with React so it's worth spending some time getting used to them. Props are a way of sending data down the component tree from a parent to a child component.

I'll take you through a really simple example of using props to pass the users selection from a list of radio buttons to display in a child component.

Here's a screenshot of what we're looking to create - the selected name will display in the blue box, which is a child of the App component.

Begin by setting up your form like this -

I've added some simple CSS too. You can find all of the starting code here.

If you haven't come across React.Fragment before, it's simply a way of wrapping your code without adding unnecessary div tags.

Now let's use the useState hook to initialise the state of 'value'. Then, create a function which sets the state of 'value' to the value of the selected radio button.

Now we need to add the 'handleChange' function as an onChange event to the form.

Next, let's create the child component in which we want to display our selected name. I've called the component 'Selection' but you can call it whatever you like. The 'Selection' component has a single pair of <h3> tags.

Back in the App component, import 'Selection' and add it below your form.

Go back again to your 'Selection' file and add 'props' to the function parameters. This will allow you to pass down information from the parent component.

Then, within the <h3> tags add {props.selection}. You can can name the prop whatever you like but I have chosen to call it 'selection'.

Go back to the App component again and within the Selection component, add the 'selection' property (or whatever you've called it).

We can then assign {value} to it. You'll recall that value holds the state of the currently selected item. By assigning it to the 'selection' property, we have passed it down to the 'Selection' component and the chosen value will now display on the page.

You can check your finished code here.

Creating a New React App

Laura Todd — Mon, 22 Mar 2021 16:04:05 +0000

In this post, I'll be taking you through a simple way to set up a new React App.

First, you'll need to install Node.js. If you're not sure if you have it you can check using Command Prompt or Terminal.

If you've never use the Command Prompt or Terminal before, it is an application which will already be installed on your computer. To find it on a PC, go to the start menu and begin typing 'Command Prompt' - it will display in the menu. To find it on a Mac, go to Spotlight and begin typing 'Terminal' - the icon will display.

To check if you have Node.js type 'node -v' in the terminal and press enter.

If Node is already installed on your machine, the version will be displayed in the line below.

If you don't have Node installed, you can download it from here. Download and install the LTS version. Once you have Node installed, you can create a new app using npm.Back in the Terminal, navigate to the folder in which you want to create your app. If you've not done this in the Terminal before, preface the path with 'cd'. For example, if I wanted to navigate to a folder called GitHub in my Documents folder, I would type 'cd documents/GitHub'.

This will take me to 'C:/Users/laura/Documents/Github.

Next, type 'npm install -g create-react-app'.

Then, type 'create-react-app my-app'. The 'my-app' part of this command is the name of your app so you can call it whatever you like. Press enter, this may take a couple of minutes while npm creates the files.

Navigate to your new app by typing 'cd my-app' (or whatever you've called your app).

Enter 'npm start'. This will open your app in a local server.

To begin with, it will display the default React App which will look something like this -

Open up the folder holding your app files either in file explorer or in your Text Editor. Go to the 'src' folder - you can delete all of the files in this folder.

In the public folder, you will find an 'index.html' file. You can either keep this file or replace it with your own but it is set up with a root div and has some useful meta tags already set up so I tend to keep it.

You can then create new a new index.js file in the 'src' folder and begin building your app from there.