Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Apr, 2022

Props: Props means properties. Props is an argument that we pass from the parent component to the child component in ReactJS through the HTML attribute. You can refer to this article to know more about props: https://www.geeksforgeeks.org/reactjs-props-set-1/

Now we will see how to pass props to ReactJS component that wrapped in variables. Here we have used React.cloneElement() method to get it. The whole process is shown below. Here the whole process is shown by creating the application.

Creating 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 folder Structure: It has to look like this.

 

App.js: Here the component <Program/> is wrapped in the “c” variable. Then the React.cloneElement() method used here. This method is used to create the clone of the element that will be given as an argument, also here we can pass props and children as arguments. Here variable “c” is passed as an element in React.cloneElement() method for cloning, also passed props {name1: “C++”, name2: “JAVA”}.

You can refer to this article to know more about React.cloneElement(): https://www.geeksforgeeks.org/how-to-use-react-cloneelement-function/

Note: Before using the component, you must import the component file
 

Javascript




import React from "react";
import Program from "./Program";
  
const App = () => {
  let c = <Program />;
    
  // Here passed props - {name1: "C++", name2: "JAVA"}
  const p = React.cloneElement(c, 
    { name1: "C++", name2: "JAVA" });
  return (
  <>
    {p}
  </>
  );
};
  
export default App;


Program.js: Here the props are passed from App.js

Javascript




import React from 'react';
  
const Program = (props) => {
    return (
        <>
            <h1>
                My favourite programming 
                language is {props.name1}
            </h1>
            <h1>
                Another favourite programming 
                language is {props.name2}
            </h1>
        </>
      )
}
  
export default Program;


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

npm start

Output: 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!