ReactJS Properties props

react

In React, props (short for properties) are a way to pass data from a parent component to a child component. Props are read-only in the child component, which means that the child component cannot modify the props it receives.

Props are passed to a component as an object, and the component can access the props using the props parameter. For example, if a component receives a name prop, it can access the value of the name prop using props.name.

Here is an example of how you might use props in a React component:

import React from 'react';

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

function App() {
    return (
        <div>
            <Welcome name="John"/>
            <Welcome name="Jane"/>
        </div>
    );
}

export default App;

In this example, the Welcome component receives a name prop and uses it to render a greeting. The App component renders two instances of the Welcome component, passing a different name prop to each instance. The result is two greetings, one saying “Hello, John!” and the other saying “Hello, Jane!“.

Props can be of any type, including numbers, strings, arrays, objects, and even functions. You can use props to pass data, configuration options, event handlers, and more to your components.