State in React Component

Before i delve into state in class component and functional component with examples, i would like to introduce what state is in react.

Introduction to State in React

  1. Class based component
  2. Functional based component

It’s imperative to know how to work with class component and functional component. If you’re a beginner learning react, learn to know the basics of class based component before learning functional component.

Let’s get started with class based component.

State in class based component

Car.js file
Car.js file

Let me explain what we are doing here.

Inside the constructor function, we called super by passing props to it. Then we defined the state as an object with brand, model, color, ram, storage and year as properties of the object.

Inside the changeColor function, we’re updating only the color. To change a value in the state object, use the this.setState() method.

And inside the render method for the JSX, we added a button and onClick on that button called this.state.changeColor and for the inner text, we displayed the state property values and render on the UI.

Pretty straight forward. The three steps necessary to implement this state object are:

1. The first step is to create a component and i have used a class component.

2. The second step is to create a state variables initialized to Samsung, GTS3000, black, 4gb, 128gb and 2019.

3. The last step is to create a method that is capable of setting the state value.

Note: Always use the setState() method to change the state object in class component. It will ensure that the component knows its been updated and calls the render() method.

State in functional component

You can create a functional component in React like this:

Counter.js file

The three steps necessary to implement the counter in this example:

1. The first step is to create a component and i have used a functional component.

2. The second step is to create a state property initialized to zero

3. The third step is to create a method capable of setting that state property value.

Since we are working with a functional component, we cannot use state like we did in class component. We need a different way to implement steps two and three. That’s where useState hook comes into picture. A hook is just a special function that lets you hook into React features. useState is a hook that lets you add React state to functional component.

let’s take a look at the code

We begin by importing it from React “{ useState }”. Hooks are functions so we simply call useState(). UseState() accepts an argument which is the initial value of the state property and returns the current value of the state property and a method that is capable of updating that state property. Here, useState accept the initial value of the state variable which is zero and returns a pair of values. Current value of the state variable called count and a method that can update the state variable called setCount “const[count, setCount] = useState(0)”. This syntax is called array destructuring which is a feature in ES6. I chose to name the state variable count and setCount. You can name the state variable whatever you like. We created handleCount function and called setCount passing in the new count value and the new count value is current count plus one “ setCount(count + 1) “. We can now use these variables in the JSX. The inner text count is what we want to render and onClick will call handleCount. That’s it.

There are two important rules you must follow when using Hooks:

  1. Only call Hooks at the top level: Don’t call Hooks inside loops, conditions, or nested functions.
  2. Only call Hooks from React Functions: Call them from within React functional components and not just any regular JavaScript function.

Thank You All For Reading This Article!!

Your feedback is most welcome.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abidemi Animashaun

Hi everyone! I’m a web full stack developer. I write JavaScript and Php with exemplary knowledge in Reactjs, Node.js, Laravel and Nest.js.