I have spend the yesterday and today learning react in my #100daysofCode challenge.
My main focus has been to learn about props, state and setState. I found it a bit difficult at first to understand the concept of state and setState but as all good students do I never gave up and continued learning and I now have a bit of technical know how on the subject matter.
In order to explain props lets start by writing two components a parent and a child component.

class School extends React.Component{
render(){

return(
<div>
<h1> This is a parent Component</h1>
        <h2>    <Student/> </h2>
</div>)
   };
}

lets now write our child component

const student =() =>{
return <p> my name is charles </>;
};

We may want to render the student multiple times in the School component and with different names and this is where props come in handy.

So What are props? props are arguments that are passed to react components.You may think of props as parameters that are passed to functions in JavaScript.

Arguments passed in a JavaScript function

function Add(one , two){
return one+ two;
}

Props passed as argument in react

const Student =(props) =>{
return <p> my name is charles </>;
};

So to render the students component with different names and multiple times in the school component we just use props to pass data from the parent component (School) to the child component (Student);

class School extends React.Component{
render(){

return(
<div>
<h1> This is a parent Component</h1>
        <h2>    <Student name={'charles'}/> </h2>
        <h2>    <Student name={"pamela"}/> </h2>
        <h2>    <Student name={"Sheila"}/> </h2>

</div>)
   };
}

const Student =(props) =>{
return <p> my name is {props.name} </p>;
};

This is what is rendered on the web page

So we see that each child component renders its own prop data .So props are basically used to pass data from the parent component to the child component and in a unidirectional way meaning that data flow is one way from parent component to child component only.

Now lets talk about state.
### What is state?

State is simply an object that hold information about a react Component.
State is used in tracking changes that occur in a react Component and re-rendering it.
So let write a simple counter app to demonstrate the use of state in react

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  handleAddOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count + 1,
      };
    });
  }
  handleMinusOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count - 1,
      };
    });
  }
  render() {
    return (
      <div>
        <h1>Count:{this.state.count}</h1>
        <button onClick={() =>this.handleAddOne()}>+1</button>
        <button onClick={ () =>this.handleMinusOne()}>-1</button>
      </div>
    );
  }
}


ReactDOM.render(<Counter/>, root);

This is a simple app which has two buttons .One button to increase the value of a number when pressed and the other to decrease the value of the number.

Lets break down the code
We start by writing our state in the constructor and initializing it with data

 constructor() {
    super();
    this.state = {
      count: 0,
    };

In this example we hard coded our data but you can use props to pass data to the state.

UPDATE THE STATE

we then change our state and update it and this is where setState() method comes in

 handleAddOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count + 1,
      };
    });
  }
  handleMinusOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count - 1,
      };
    });
  }

If we look at both the handleAddOne() and HandleMinusOne() methods the SetState()method is used to update the value of the initial state.
The setState method takes in a callback function through which we can access the prevState which holds the the previous state of the component where can modify and update the state.

There are some guidelines when it comes to using setState()

Don't modify the state directly

 this.setState(() => {
      //method to update the state
      return {
        count: this.state.count + 1
      };
    });

The above codes work but its not the best way to modify the state as we as we are doing it directly.
This is because setSate is an a asynchronous operation and the changes to the state may happen at a later time hence the setState may overwrite our manually mutated state.

This two day have been a bit hectic as I was trying to understand state and props but I have managed to pull through and get the concepts.
You can do it to us don't give up and happy learning.

100daysofCode.

Resources

React Docs
Github
stackOverflow