1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Adding and Updating State to Components

React - Adding and Updating State to Components

Developed with

The course is part of this learning path

ReactJS: Zero to Hero
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 qa.elearningadmin@qa.com to let us know what you think. 


Starring state in 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 useState 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 ComponentWithState 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 to do structuring of an array to set values of the name of the state and a function to update its value to the return of the useState hook. An argument can be supplied to the useState hook that is set as 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 you use the state value, we simply use the state name in JSX expressions. In the return of ComponentWithState, 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 ComponentWithState. That's our count. If we look at the CountUser component, we can see there is a prop called countProp 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 and the name of the updated function.


About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics