What are Props React?

In React, 𝙥𝙧𝙤𝙥𝙨 (short for "properties") are parameters that you can pass to components, allowing you to share data between parent and child components. They are a way to 𝙢𝙖𝙠𝙚 𝙘𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩𝙨 𝙧𝙚𝙪𝙨𝙖𝙗𝙡𝙚 and to pass dynamic information to a component, which can then be used within the component to alter the display or behavior.

𝙆𝙚𝙮 𝙘𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧𝙞𝙨𝙩𝙞𝙘𝙨 𝙤𝙛 𝙥𝙧𝙤𝙥𝙨:

1. 𝗜𝗺𝗺𝘂𝘁𝗮𝗯𝗹𝗲: Props are 𝘐𝘮𝘮𝘶𝘵𝘢𝘣𝘭𝘦 within the component that receives them, meaning a component cannot modify its own props directly. They are passed from the parent component to the child component and remain unchanged during the component's lifecycle.

2. 𝗥𝗲𝗮𝗱-𝗼𝗻𝗹𝘆: A child component can access the props but cannot modify them. If you need to change the value of props, this change must be made in the parent component and passed down again to the child.

3. 𝗗𝗮𝘁𝗮 𝘁𝗿𝗮𝗻𝘀𝗺𝗶𝘀𝘀𝗶𝗼𝗻: Props are used to pass data, such as strings, numbers, functions, or even other components, from one component to another.

𝗦𝗶𝗺𝗽𝗹𝗲 𝗲𝘅𝗮𝗺𝗽𝗹𝗲 𝗼𝗳 𝘂𝘀𝗶𝗻𝗴 `𝗽𝗿𝗼𝗽𝘀:

Let's create two components: a parent component and a child. The parent will send data to the child using props.

Now, the parent component sends a value as a prop to the child component:

In this example, the parent component (ParentComponent) passes the prop name="Ricardo" to the child component (ChildComponent). The child component receives this prop as an argument (props) and uses it to render the string "Hello, Ricardo!".

More advanced examples of props:

1. Passing functions as props: You can also pass functions as props, which allows a child component to communicate events back to the parent component.

In this example, the child component (ChildComponent) receives the function handleClick as a prop and executes it when the button is clicked.

1. 𝙋𝙧𝙤𝙥𝙨 𝙬𝙞𝙩𝙝 𝙙𝙮𝙣𝙖𝙢𝙞𝙘 𝙫𝙖𝙡𝙪𝙚𝙨: Props can also be dynamic values, such as a component's state, data from an API, etc.

Here, the value of name is stored in the parent component's state and passed to the child component as a prop.

𝗦𝘂𝗺𝗺𝗮𝗿𝘆:

• 𝗣𝗿𝗼𝗽𝘀 allow you to pass data and functions from a parent component to a child component.
• They are 𝘐𝘮𝘮𝘶𝘵𝘢𝘣𝘭𝘦 in the component that receives them.
• They are very useful for making components 𝘳𝘦𝘶𝘴𝘢𝘣𝘭𝘦 and 𝘥𝘺𝘯𝘢𝘮𝘪𝘤.
• You can pass any type of data as props: strings, numbers, arrays, objects, functions, etc.

𝗣𝗿𝗼𝗽𝘀 are one of the most fundamental concepts in React for developing dynamic and modular components.