What are props in React?

In React, props (short for “properties”) are a way for a parent component to pass data down to its child components. Props are an immutable form of data that are passed to a component from the parent component, and they can be used to configure the component or to provide it with data that it needs to render.

Here is an example of how props are used in a React component:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default MyComponent;

In this example, the MyComponent component accepts two props: title and description. These props are passed to the component from the parent component, and they are used to render the title and description elements in the component’s JSX.

Props are a powerful feature of React that allow you to create reusable and flexible components that can be customized and configured by the parent component.

In React, props (short for “properties”) are a way for a parent component to pass data to its children. Here’s an example of a simple component that accepts props:

import React from 'react';

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

This component accepts a single prop, name, and uses it to render a personalized greeting.

To use this component, you can pass it props like this:

<Greeting name="Jane" />

This will render a heading that says “Hello, Jane!” on the page.

You can also pass multiple props to a component, like this:

<Greeting name="Jane" age={30} />

This will pass both a name prop and an age prop to the Greeting component. You can access these props inside the component using props.name and props.age.

Props are a powerful way to pass data between components in a React application. They are immutable, meaning that the parent component is responsible for passing the props to the child component, and the child component cannot modify the props it receives. This helps to enforce a unidirectional data flow and can make it easier to reason about your application’s state.