You need to familiarize yourself with many different React elements to develop outstanding React web applications. Props and State are at the core of React development. Most developers often confuse the two terms and their functionalities. Here is a detailed comparison between React State vs Props for all you need to know:

React is one of the most popular web app frameworks globally for creating appealing and robust modern web apps for businesses. Since it is an open-source JavaScript-based framework, many developers are also drawn toward learning React. Even though the learning curve with React is comparatively lower than most frameworks, some essential React concepts even seasoned React developers need help with at times. Two important concepts essential to React development are React Props vs. the React State. Many developers confuse the two or use the terms interchangeably, which is incorrect. They work together to achieve many benefits for React development. However, they are fundamentally different concepts. Before we understand the differences between React Props and State, we should understand these concepts individually first:

What are Props in React?

Props (abbreviation for Properties) are arguments you pass to React components. They are passed through HTML templates and are a method to pass data from one component to another. Props can be compared to functional arguments. They are passed to the component in the same manner arguments are passed in a function.

Let us understand how props work step by step:

1. Sending props to a component

Adding a “brand” attribute to the Bike element: const myelement = ;

2. The component will receive the argument as a props object

Add the brand attribute in the component:

function Bike(props) {
    return <h2> I am a { props.brand } !</h2>;
}

3.1 Passing data as a string from one component to another

Pass the “brand” property from the Garage component to the Car component:

function Bike(props) {
  return <h2>I am a {props.brand}!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Which bike do I have in my garage?</h1>

      <Bike brand="Harley Davidson" />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById("root"));

3.2 Passing a variable from one component to another

If you need to send a variable instead of a string, you need to create a variable named bikeName and send it to the Bike component:

function Bike(props) {
  return <h2>I am a {props.brand}!</h2>;
}

function Garage() {
  const bikeName = "Harley Davidson";

  return (
    <>
      <h1>Which bike do I have in my garage?</h1>

      <Bike brand={bikeName} />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById("root"));

3.3 Passing an Object from one component to another

Create an Object named carInfo and send it to the Car component:

function Bike(props) {
  return <h2>I am a {props.brand.model}!</h2>;
}

function Garage() {
  const bikeInfo = { name: "Harley Davidson", model: "Street Glide" };

  return (
    <>
      <h1>>Which bike do I have in my garage?</h1>

      <Bike brand={carInfo} />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById("root"));

What are State in React?