React - Adding and Updating State to Components
Adding State to Function Components

This module looks at how to add and update state to a variety of different components.

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • How to add and update state to class and function components

Intended Audience  

This Learning Path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 


Storing state and components was traditionally the job of class components until React version 16.8 which is affectionately known in the community as the one with hooks. The addition of hooks gave the required functionality to functional components to implement state. For a functional component to have state, the use state hook must be imported from the React library. And you can see that this has been added to the imports from React on line one of the component with state code that is shown on the top left half of the screen. 

To declare a state value in a component you need to use JavaScript destructuring of an array to set values of the name of the state and a function to update its value to the return of the use state hook. An argument can be supplied to the use state hook that is set as just the initial value of the state. This can be seen on line six where we have supplied an initial value of five for the state count. 

To use the state value, we simply use the state name in JSX expressions. In the return of component with state, the value of state is used as part of the markup and also as a prop to a sub component. The sub component is shown in the lower half of the left of the screen. It does nothing more than receive a prop and use it. 

On the initial render of the application, the initial value of state will be used for display as shown in the browser window on the right. If we navigate through the component hierarchy, using the React developer tools in the console, we can see that there is a hook state that has a value of five on the component with state. That's our count. If we look at the count user component, we can see that it has a prop called count prop and its value is five as expected too. 

And just to note, the name of the state and the function to update it can be anything we want. It's just good practice to use the prefix set followed by the capitalized name of the state for the name of the updated function.


About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics