How to use state in React, fundamentals!

Hello, world!

I personally just started out learning react and I want to share in a pretty much simple way what I understand about react states and how to use. I'm a newbie at react and like always I just want to share one or two things. So if you are here, you are probably trying to understand how to work with react states,

Well, Good news! You are not alone. when I started off with react I had this issue of getting how states work. And like I always say it. if I can get it, then anyone can. i will walk you through the concept of react states and trust me. it's easier than you think!

What is state?

State is a JavaScript object that stores a component’s dynamic data and determines the component’s behaviour. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

When adding states it's generally done on to a class component or a functional component.

What then is a class and functional component?

What is a class component?

A class component is simply a more featured way to define a React component. It also acts like a function that receives props (params in react), but that function also considers a private internal state as additional input that controls the returned JSX(JavaScript XML). An interesting fact about a class component is that it requires you to extend from React.Component and create a render function which returns a React element.

React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Example

Creating the state Object

The state object is initialized in our constructor:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

And our state object can contain as many properties as you like:
Specify all the properties your component need:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Using the state Object

While trying to access the state properties in our component , we refer to the state object anywhere in the component by using this.state.propertyname syntax

Example

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Changing the state Object

To change a value in the state object, use the this.setState() method. When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

Example
For this we will defiantly need an onClick even handle for a button to update the state when the user clicks , Handling events with React elements is very similar to handling events on DOM elements. However, There are some syntax differences:

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.
  For example, the HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in react:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Continuing with our example, we will add a button with an onClick event that will change the color property:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Note: Always use the setState() method to change the state object, it will ensure that the component knows it's been updated and calls the render() method (and all the other lifecycle methods).

What is a functional component?

On the other hand, a functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. It works slightly like the class component just here we don't have the 'this' keyword that said we will get something like:

export default function Car() {
  const [state, setState] = React.useState({
    brand: "Ford",
    model: "Mustang",
    color: "red",
    year: 1964
  });

  const changeColor = () => {
    setState({ color: "blue" });
  };

  return (
    <div>
      <h1>My {state.brand}</h1>
      <p>
        It is a {state.color}
        {state.model}
        from {state.year}.
      </p>
      <button type="button" onClick={changeColor}>
        Change color
      </button>
    </div>
  );
}

We note that. we can set a state only with its setState method! From all evidence, it does sound less complex when we break it down and try to understand it in chunks!