Day 2 and 3  of the #100daysofCode Challenge. Learning React
Tags: react, 100daysofcode, codenewbie
Published: 2021-02-21 09:35:26

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
![download (2).jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1613889668689/ang-Fw40w.jpeg)


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](https://reactjs.org/docs/state-and-lifecycle.html) 
 [Github](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) 
 [stackOverflow](https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really)