How to pass props to ReactJS component that wrapped in variable ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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.jsReact JSReact JS PropsReact.cloneElementApproach: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 projectnameStep 2: After creating your project folder i.e. project name, move to it using the following command: cd projectnameProject Structure: Example: This example uses React.cloneElement method to pass props to React JS component wrapped in variable. JavaScript // Filename - App.js 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; JavaScript // Filename - Program.js 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 startOutput: This output will be visible on the http://localhost:3000/ on the browser window. Comment More infoAdvertise with us Next Article How to get text inside Text component onPress in ReactJS ? T torq1284 Follow Improve Article Tags : Web Technologies ReactJS React-Questions React-Props Similar Reads How to add Event Listeners to wrapped Component in ReactJS ? React provides a powerful way of DOM manipulation by introducing the concept of virtual DOM. It is mainly used to build single-page applications. There are times when you need to add event listeners. This can be achieved by using the concept of forwarding refs and leveraging React's lifecycle method 2 min read How To Pass Props From Parent to Child Component in ReactJS? ReactJS is a powerful library that helps developers build interactive user interfaces by breaking them into reusable components. One of the essential features of React is the ability to pass data between components using props. In React, props allow parent components to send data or functions to chi 3 min read How to Pass JSON Values into React Components ? In React, you can pass JSON values into components using props. Props allow us to send data from a parent component to its child components. When rendering a component, you can pass the JSON values as props. These props can then be accessed within the componentâs function or class, allowing you to d 3 min read How to Send state/props to Another Component in React with onClick? The props and state are the main concepts of React. Actually, only changes in props and/ or state trigger React to re-render your components and potentially update the DOM in the browserProps are used to pass data from a parent to a child component.State is used to manage dynamic data within a compo 3 min read How to get text inside Text component onPress in ReactJS ? In this article, we will learn "How to get the text inside Text component onPress in ReactJS?". Problem Statement: Sometimes in an application, it is required to get the text inside certain components, in order to reuse the components again & again just by changing the text value. Approach: We w 4 min read Write a program to pass values to child using context in ReactJS ? Passing values to chile in react js is an important concept in react js. It simply can be achieved by using prop drilling but it is not the right way in case of big project. Hence we will pass the values to child using context in react js with the help of useContext Hook. PrerequisitesReact JSReact 4 min read Like