React Props

React Props


React Props, short for properties, are a way to pass data from a parent component to a child component. Props are used to customize a component's behavior and appearance. In this tutorial, we will go over how to use props in React and some common use cases.

First, let's create a simple component called "Button" that takes in a prop called "label". The label prop will be used to display text on the button

Now, in our parent component, we can pass the label prop to the Button component.

In this example, the "Click Me" text will be displayed on the button.

Props can also be used to pass in functions as well. For example, let's say we have a component called "List" that takes in a prop called "handleClick". The handleClick prop is a function that is called when a list item is clicked.

In our parent component, we can pass in a function to the handleClick prop.

In this example, when an item in the list is clicked, the "Item clicked!" text will be logged to the console.

Props can also have default values. For example, let's say we want to give our Button component a default label of "Submit". We can do this by setting a default value for the label prop in the component

In this example, if no label prop is passed to the Button component, the text "Submit" will be displayed on the button.

In summary, React props are a powerful way to pass data and functions to child components. They can be used to customize a component's behavior and appearance, and can also have default values. Understanding how to use props is essential for building complex and dynamic applications with React