React Props vs States in 5 easy steps

React Props vs States is an essential concept in ReactJS used to manage data and control the behavior of components. Props and States are both used in React to manage data, but they serve different purposes and have different characteristics which we will discuss further.

1. Props in React

Props, short for Properties, are used to pass data from a Parent Component to a Child Component. Props are read-only meaning that they cannot be modified by the Child Component. Instead, the Child Component can use props to display or trigger events.

2. Passing data between components using Props

In React, You can pass data between components using props. In this way, Parent Component passes data to Child Component. For Example:

• Create a React App, in case you don’t know how to create a React app just follow Create a ReactJS project from Scratch

• Create two components in a file with the name <strong>parent</strong> and <strong>child</strong> in a file name props.js

props.js

import React from "react";

function Parent() {
  const name = "Devcribe";
  return (
    <div>
      <Child name={name} />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <p>{props.name}</p>
    </div>
  );
}

export default Parent;

• Then call the exported Parent Component in App.js to display the output.

App.js

import React from "react";
import Parent from "./props";

function App() {
  return (
    <div>
      <Parent />
    </div>
  );
}

export default App;

• After this run your development server using

npm start

• You’ll see the following result.

3. States in React

State, on the other hand, is used to manage data within a component. Unlike props, the state can be modified by the component itself. When the state of a component changes, React will automatically re-render the component and update the UI.

4. Managing component state with useState Hook

In React, you can manage the component state using the ‘useState’ hook. The ‘useState’ hook is a built-in React hook that allows you to add a state to a functional component. For Example:

• Create a file within React Application named as <strong>StateManagment.js</strong>
• Create a <strong>Counter()</strong> function in it and the following code.

StateManagment.js

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You Clicked the button {count} times.</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default Counter;

• After this Import Counter in App.js

App.js

import React from "react";
import Counter from "./StateManagment";

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

• Once you will run it, you’ll see the following output

5. React Props VS States

React Props vs States, both are used in React to manage data, but they serve different purposes and have different characteristics, such as

That’s all to understand React Props vs States in ReactJS. I hope it will be a quite useful tutorial to understand how to implement Props and States as well as how it works.

Also, check out React Component in 5 easy steps. If your want to learn more about ReactJS, you can follow all the ReactJS tutorials starting from “Introduction to React” on devcribe.com. Happy Coding!