What is props in react

In React, “props” (short for “properties”) is a way to pass data from a parent component to a child component.

When a component is defined, it can receive data through its props parameter. The data can be anything from primitive types like strings and numbers to more complex objects and functions. Once the data is passed to the child component through props, it becomes immutable, meaning it cannot be modified by the child component.

Here’s an example of a simple React component that receives a prop:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

In this example, the Greeting component receives a prop called name. The prop is accessed using the props parameter and displayed using JSX syntax. The component can be used like this:

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

In this example, the App component renders two instances of the Greeting component, passing in different names through the name prop. The Greeting component displays the name passed through the name prop, resulting in the output:

Hello, Alice!
Hello, Bob!

Props provide a way for components to communicate and can make the process of building complex user interfaces in React easier and more modular.