Properties (short “props”) are used in React components to pass data from outside into a component. This can be used e.g. to pass data from one component to another component. Working with React component props is a common task when programming with React. This article provides a short and comprehensive introduction to props in React.
In order to get started with a first simple example let’s create a new React project by using the create-react-app script in the following way:
$ npx create-react-app react-props
Change into that newly created project folder:
$ cd react-props
And open the project in your favorite code editor.
Replace the default implementation of App component in src/App.js with the following simple component implementation:
class App extends Component { render(){ return <div>Hello, World!</div> }}
This component takes no props is just outputting the text “Hello, World!”. After starting the web server with
$ npm start
You should be able to see the output in the browser:
Let’s make the text output dynamic by adding text which is passed to the component by an component property:
class App extends Component { render(){ return <div>Hello, {this.props.name}!</div> }}
This component is expecting to get a name passed in by using the name prop. This prop can be accessed from inside the component by using this.props.name.
In order to assign a value to the name property you need to change to file index.js and change it to:
const root = ReactDOM.createRoot(document.getElementById('root'));root.render( <React.StrictMode> <App name="Peter" /> </React.StrictMode>);
Here you can see that we’re passing the value “Peter” to the App component instance. The output should now look like what you can see in the following screenshot:
Props With Function Components
So far we’ve used classic class components. React also support function components. Using props with function components is very easy as well. Let’s take a look at the implementation of App component as a function component in the following code listing:
function App(props) { return <div>Hello, {props.name}!</div>}
The output you should then be able to see in the browser should be the same as before.
In order to to make props accessible in a function component you need to pass the props argument to the function and then you can access props by using the props object inside the function.
Passing Props Between Components
Let’s extend the our example a little bit by introducing a second component. Let’s say we want to have a component which is called Greeting and is responsible to output the greeting message as seen below:
... function Greeting(props) { return ( <div> Hello, {props.name}! Nice to meet you! </div> );}
Inside App component we’re now able to use Greeting component as a child component and pass a value for the name prop:
function App() { return <Greeting name="Peter"/>}function Greeting(props) { return ( <div> Hello, {props.name}! Nice to meet you! </div> );}
The output should then look like you can see in the following:
FAQs
To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.
How do you pass props between two components React? ›
To pass props between sibling components, you can use a common parent component to manage the shared state and pass it down to the siblings as props. Alternatively, you can use advanced state management solutions like Redux or the React Context API to manageshared state between components that are not directly related.
How do you pass multiple props to component in React? ›
When you have two components or more, you can pass data around. Here's another example with two components. As the code example demonstrates, you can pass props between components by adding them when the component is being called, just like you pass arguments when calling on a regular JavaScript function .
How do you pass props to a dynamic component in React? ›
Working with Props in React
Props provide a way to make components dynamic and reusable. To pass props to a component, we simply pass them as attributes when rendering the component. This allows us to configure the behavior and appearance of child components based on the data provided by the parent component.
How to pass function as props in React functional component? ›
Pass the function via props
You can think of props as custom attributes for components in React. To pass a function, you can simply reference the name of the variable that stores the function. In this case, that would be handleClick variable. In this case, the name of the prop (the custom attribute) is handler .
How do you pass all props to a component? ›
To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.
How do you pass state as props to another component? ›
To pass state data as props, we need to define the state in the parent component and pass it to the child component as an attribute. Another method of passing state to another component is via context. without having to pass props down manually at every level.
Can you pass components as props? ›
When you pass a component as a prop, you provide a child component with a React element that it can render as part of its output. This technique is not limited to simple data types; functions and entire components can be passed as props, enabling complex interactions and composition.
What is the best way to send 4 or more props to a child component? ›
To pass additional props to the children from within the parent component, you need to clone the children components using React. cloneElement() . The React. cloneElement() API clones an element and returns a new React element.
How do you pass props to component in Route React? ›
If you need to pass a prop to a component being rendered by React Router, instead of using Routes component prop, use its render prop passing it an inline function then pass along the arguments to the element you're creating. Post React Router uses a declarative, component based approach to routing.
In this approach, props are passed as a parameter to a function. The props values can then be accessed within the function using the props keyword. For example – props. propName – props is a keyword and propName is a property whose values are passed from the App.
How do you pass props on condition in React? ›
The first method to solve this problem is to use the traditional if statement or if else statement. Let's suppose, there is a react component and we are passing a prop named genuineKey to the component based on whether isGenuineKeyPresent the value is true or not.
How to pass props in onClick? ›
Finally, your Button component accepts a prop called onClick . It passes that prop directly to the built-in browser <button> with onClick={onClick} . This tells React to call the passed function on click. If you use a design system, it's common for components like buttons to contain styling but not specify behavior.
How to pass setState as props in React functional component? ›
No, it's not. It's possible to pass setState as a prop in React. However, it's not the recommended way to deal with updating state triggered by child components. Passing down setState makes it hard to reason about the state of the component.
How do you pass navigation props in React functional component? ›
Access the navigation prop from any component
- import * as React from 'react';
- import { Button } from 'react-native';
- function GoToButton({ navigation, screenName }) {
- return (
- <Button.
- title={`Go to ${screenName}`}
- onPress={() => navigation. navigate(screenName)}
- />
Props are usually passed from a parent component to a child component. A parent component is a component in which you import another component and pass props inside it. In the example above, App is our parent component. So to pass props into the child component we need to import it in App.
How do I pass props from one screen to another in React? ›
We can easily pass data between screens using this. props. navigation. navigate() method, the data which wants to pass between screens is passed as a parameter also called params, in this method.
How to pass function from one component to another in ReactJS? ›
To pass a state variable from a child component to a parent component in React, you can define a callback function in the parent component and pass it down to the child as a prop. The child component can then call this callback function and pass the updated state as an argument.
How to share data between components in React? ›
Steps to lift state up
- Move the state from the child component to the parent component.
- Pass the state down to the child components via props.
- If the child components need to modify the state, pass down callback functions via props.
