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
• Kent Dodds

👉🏾 Learn more about me 👉🏾 Connect on LinkedIn 👉🏾 Subscribe to my blog, let's feast