# Props vs State - React

In building a **React** project, you make use of *props* or *states* ( as the case may be ) across your application, in this article you would learn:

- What props are
- What states are 
- How to use props and states in React components
- The difference between props and states

## What exactly are Props?
*Props* is just a short form of saying `properties`, think of `props` as arguments passed into a *function*. 
React components are functions that return JSX (or more generally something that's renderable like React elements, null, a string, etc.). Typically when you have a piece of code that you would like to reuse, you can place that code into a function, and any dynamic values that code used before can be accepted as arguments. 

That being said, `props` can be anything. In our example they're numbers, but they can also be (and often are) strings, arrays, objects, functions, etc. 

In the example below, the parent component can pass a prop to its child component like:

```
<AdditionComponent n1={2} n2={3} />

```

The child component can make use of the passed props by getting the props and using in this format:

```
function AdditionComponent(props) {
  return (
    <div>
      {props.n1} + {props.n2} = {props.n1 + props.n2}
    </div>
  )
}
```

Which would in turn render `2 + 3 = 5` on the UI.

> Props are immutable so we cannot modify the props from inside the component. Modifying the props passed into the Add component would throw an error; 

In your react app, you can **destructure** your props so as to make your code more readable and still get the same output. *Destructuring* the example above would give us this output:

```
function AdditionComponent(props) {
const { n1, n2 } = props  
return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  )
}
```

Another way of destrcturing is doing it at the top level of your fucntion declaration:

```
function AdditionComponent({n1,n2}) {
  return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  )
}
```


After agreeing that props are immutable, what happens if we want to change  a particular prop value based on an action? We get an `error` and this is where **states** come in...


## What is a React State?

Like `props`, `state` holds information about the component. However, the kind of information and how it is handled is different. The `state` is an updatable structure that is used to contain data or information about the component and can change over time. The change in `state` can happen as a response to user action or system event. 

To define a state in a *React (Functional Component)* all we have to do is import the `useState` hook into our app and use accordingly, like below:

```
import {useState} from "react";

const AdditionForm = () => {
  const [num, setNum] = useState(0)

  function handleInputChange(event) {
    setNum(event.target.value)
  }

  return (
    <div>
      <input type="number" value={num} onChange={handleInputChange} /> =  {num}
    </div>
  )
}

```

Now, for each change in the input field, num gets tracked according to the state change.

Where as, for  a *Class based component*, we can achieve the same action by doing this:

```
class AdditionForm extends React.Component {
  constructor() {
    super();
    this.state = {
      num: 0,
    };
  }
handleInputChange(event) {
    this.setState({num: event.target.value });
  }
render() {
    return (
      <input type="number" value={this.state.num} onChange={this.handleInputChange} /> = {this.state.num}
 );
 }
}
```

Now, state is changeable and can be reused across our application 😉


## Conclusion

We now have a proper idea of what states and props are, how they can be used, and the difference between both. 

> Go ahead and test your knowledge on what you've learnt and tell me in the comment section if you can pass `states` as `props` in a React application 🙋🏾‍♂️❔

#### Resources used:
-  [Madhavan Nagarajan](https://medium.com/@itIsMadhavan/reactjs-props-vs-state-ff3a7680930d) 
-  [Kent Dodds](https://kentcdodds.com/blog/props-vs-state) 

👉🏾 [Learn more about me](https://abdulqudus.com)
👉🏾 [Connect on LinkedIn](https://linkedin.com/in/jideabdqudus/) 
👉🏾 [Subscribe to my blog, let's feast](https://blog.abdulqudus.com)