Let's talk about React Props and State

Welcome, so before we start I expect you to have at least a little understanding of react as you’ll need it in this article.

Let’s get started, In this article, I will be sharing with you :

· What are Props?

· How Props are used in React?

· What is a state?

· How is a state used?

What are Props?

Props are arguments passed into react components to re-render and update the DOM. Props are passed from the parent component to the child component. Props is a short for properties.

How Props are used in React?

Like I said above, props are passed in a component from the parent component, this is implemented in the line of code below.

//This is the Parent component 
class ParentComponent extends Component {    
    render() {    
        return (   
        <div>
             <h1>Hello, nice to meet you</h1>
            <ChildComponent name="Emmanuel" />   
            <ChildComponent name="Jessica" />   
       </div>
        );  
    }};

“name” in the “ChildComponent” is a “prop” and it contains the argument or data that is to be rendered by the ChildComponent. Props are being handled as an object, now we can access our “prop” in the “ChildComponent” in the code below.

// This is the child component
const ChildComponent = (props) => {    
    return <p>My name is {props.name}</p>; 
}

We used the dot notation to access the prop data passed in and rendered it just the way it’s done above. NB: props are objects, destructuring can also be done to access the prop data.

What is a state?

State allows us to create components that are dynamic, it enables a component to keep track of changes between renders and for it to be interactive.

How is a state used?

for states, only class components can define and use State, so it can only be accessed and modified within the component.

State can be modified by using the setState() function, when state is being modified our component re-renders. Do not modify a state directly use the setState(), see the code below:

class Shooter extends Component {
  state = {
        shot: 0
}
  render(){
    return(
      <p>{this.state.shot} shot(s)</p>
    )
  }};

So like I said earlier, to modify our state, we use the setState() function and the fact that our state should not be modified directly. So our setState() function takes a callback, see code below.

this.setState({       
    shot: "20"
});
// Instead of modifying it directly like this
this.state.count = “20”;

Conclusion

I hope this article has helped you clear up the difference between props and state in React and I hope you found it useful. if you want to study more about react props and state, you can check these out: ▪︎reactjs.org/docs/components-and-props.html

▪︎reactjs.org/docs/state-and-lifecycle.html

Have a nice time and keep practicing.