How to pass props to ReactJS component that wrapped in variable ?

To pass props to a React JS component that is wrapped in a variable we have to create some copy of the component that can be modified. As we can't access the props of that component and pass a required argument we can clone it to make the required element and use it in our application.

Props: Props means properties. Prop is an argument that we pass from the parent component to the child component in ReactJS through the HTML attribute.

Prerequisites:

• NPM & Node.js
• React JS
• React JS Props
• React.cloneElement

Approach:

To pass the prop in the React JS component wrapped in a variable we will use React.cloneElement method to create a copy of it. While cloning the component we can have additional modifications e.g. prop and make the required element.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app projectname

Step 2: After creating your project folder i.e. project name, move to it using the following command:

cd projectname

Project Structure:

Example: This example uses React.cloneElement method to pass props to React JS component wrapped in variable.

Steps to Run your Application: First, go to the root directory and then run the application with this command.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.