React Props and State

If you are just getting started with React JS, I understand that it can be really confusing getting to understand these concepts and how you can use them, so I decided to write this article to explain these concepts as simply as possible.

So to begin with, what do Props mean in React?

Props is the short form of properties and they are used to pass data from one component to another. The flow of this data is always in one direction (uni-directional) from parent to child component. It should also be noted that the data that is passed is always read-only and should not be changed.
Think of props as an object that contains the attribute and their values which have been passed from the parent component. Props make it possible to reuse components.

Let's take a look at an example;
We have a simple component /SayHello.js that output a simple message

import React from 'react'

const SayHello =()=>{
    return(
        <div>
            <h1>Hello and welcome onboard</h1>
        </div>
    )
}
export default SayHello;

Now we render this component in our /App.js component

import React from 'react'
import SayHello from './SayHello'

const App=()=>{
  return(
    <div>
      <SayHello />
    </div>
  )
}
export default App;

So this is a sample of a simple component without props, however, what if we would like to add a name property to the SayHello Message and we do not want to hardcode it into the h1 so as we can change the name we SayHello to with ease.

So this is where we introduce props into our components, so the /SayHello.js will now look like this

import React from 'react'

const SayHello =(props)=>{
    return(
        <div>
            <h1>Hello and welcome onboard {props.name}</h1>
        </div>
    )
}
export default SayHello;

While the name properties (props) will also be added to our /App.js component in this way

import React from 'react'
import SayHello from './SayHello'

const App=(props)=>{
  return(
    <div>
      <SayHello name="Martha" />
    </div>
  )
}
export default App;

So you can see how simple it is to introduce props into our components, we simply need to add the property (in this case name) to the component and add the Props.(whatever property) we are passing to where we want to call it.

Let's also look at how we can use props in a class component (note that our first example is a functional component).

So in a class component, our /SayHello.js will look like this

import React from 'react'

class SayHello extends React.Component{
    render(props){
        return(
            <div>
               <h1>Hello and welcome onboard {this.props.name}</h1>
            </div>
        )
    }
}
export default SayHello;

So we have seen how props work in both function and class components.

Now let's take a look at States
Just like props, State holds information about a component, it allows components to create and manage their own data, so while components pass data with Props, they create and manage data with States. This means that a component state can change, and whenever it changes the component re-renders

let's take a look at an example of a Component creating and managing data with States.

import React from 'react'

class Record extends React.Component{
    constructor(props){
    super(props)
    this.state={
        count : 0
    }
    this.handeClick = this.handeClick.bind(this)
    }
    handeClick(){
        this.setState(prevState =>{
            return{
                count:prevState.count + 1
            }
        })
    }
    render(){
        return(
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handeClick}>Change</button>
            </div>
        )
    }
}

export default Record;

From the above example, it can be seen that the Record component had a count state which is initially set to zero, but this state is changed by the action of a button click. You can see that the button has an onClick that calls the function "handleClick" which is set to change the initial state of count using the setState method.

One important thing to note is that in the early days that is before now, State could only be used in class component and not in functional component (this is why functional components were referred to as Stateless components) but with the introduction of React Hooks, State can now be used in functional components also. I will write about React Hook in my next article.

From all we have looked at in this article we can draw the following differences between Props and State in React.

1. Props are used to pass data while State is used to manage data.
2. Components use Props to receive data from outside while components create and manage their own data with State.
3. Props can only be passed from parent to child component and they are read-only.
4. State can be modified in its own component and this must be done using the setState() method.

Conclusion

Props and State are very important concepts in React JS and understanding how to use them is very crucial, Getting a solid understanding of these two would help your React journey. Feel free to leave a comment below and I would also like to hear from you about anything you need clarity on.
The complete project on everything on this article can be found here