Passing props in a component that is stored in a variable

react pass props to component
how to pass value from one component to another component in reactjs
passing data between react components
react pass component as prop
react pass component class as prop
react pass props without rendering
react pass state as props to child components
react pass object as props

So I have a simple and straight up question.

So we can store react components in a variable. But now, I want to know if it is possible pass props to a component if it is stored in a variable?

//////////////////////////////////////////////
//////  Normal & typical React component
//////////////////////////////////////////////

const myComponent = <Hello name={'Jamie'} /> 

render () {

  return myComponent;

}


////////////////////////////////////////
//////  What I want
////////////////////////////////////////

const myComponent = <HelloWorld /> 

// I want to be able to add that props here
// something like myComponent.addProps({'name': 'jamie'});

render () {

  return myComponent;

}

My problem is well beyond just this. I wanted to know if we have such a feature in React API.

You can try like following,

React.cloneElement(
  myComponent,
  {prop1: "prop value"}
)

Reference Doc: React Official Doc

How to pass props to components in React, React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces. As you have seen, props enable you to pass variables from one to another component down the component tree. In the previous example, it was only a string variable. But props can be anything from integers over objects to arrays. Even React components, but you will learn about this later.

You need to Capitalize your variable name and use normal Jsx syntax:

const MyComponent = <HelloWorld /> 

render () {
  return <MyComponent name='jamie'/>
}

This is allows things like storing components in an array:

import {
  EmailShareButton,
  FacebookShareButton,
  InstapaperShareButton,
  LineShareButton,
  LinkedinShareButton,
  LivejournalShareButton,
  MailruShareButton,
  OKShareButton,
  PinterestShareButton,
  PocketShareButton,
  RedditShareButton,
  TelegramShareButton,
  TumblrShareButton,
  TwitterShareButton,
  ViberShareButton,
  VKShareButton,
  WhatsappShareButton,
  WorkplaceShareButton,
} from "react-share"

export default class LikeShare extends Component {
  shareButtons = [
    EmailShareButton,
    FacebookShareButton,
    InstapaperShareButton,
    LineShareButton,
    LinkedinShareButton,
    LivejournalShareButton,
    MailruShareButton,
    OKShareButton,
    PinterestShareButton,
    PocketShareButton,
    RedditShareButton,
    TelegramShareButton,
    TumblrShareButton,
    TwitterShareButton,
    ViberShareButton,
    VKShareButton,
    WhatsappShareButton,
    WorkplaceShareButton,
  ]

  render = () => {
    return (
      <div>
        { this.shareButtons.map(
          ShareButton => <ShareButton url={window.location.href}/>
        )}
      </div>
    )
  }
}

How to pass props from one class to another in React.js, Try this: function tableize (a) { let resultFn = {} Object.keys(a).forEach((k) => { // Uppercase "E" from Element let Element = a[k] resultFn[k]  Everything renders fine, but I want to pass someObjectVariable prop to the child component inside CustomForm (in this case that'll be SomeInnerComponent), since in the actual code you can pass several components to it instead of just one like the example. Mind you, I also need to pass SomeInnerComponent its own props. Is there a way to do that?

you can use setProps also like

myComponent.setProps({name: 'jamie'});

How to pass props to react component that wrapped in variable , In the previous example, it was only a string variable. But props can be anything from integers over objects to arrays. Even React components, but  This means that a JSX element’s props and children can be anything that you could place in a JavaScript variable — they can be strings, other element objects, or even functions. The simplest way to use a function as an element’s children is to interpolate an arrow function with JSX. This pattern is often called passing a render function.

Props!, You just need to pass the values as props of the child element. child component and store to the parent's state the data passed from the child,  When you pass a component as a parameter directly, you pass it uninstantiated and instantiate it by retrieving it from the props. This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree (e.g. if a component uses custom styles on a tag, but it wants to let the consumer choose whether that tag is a div or span):

React, Passing Data Between React Components — Parent, Children, Method 2: Use a global store maintaining the states of all child components which are Prop-​drilling refers to the technique of passing down variables to sub  Question: How can I pass a prop or a single value, like an _id, through React-Router's Link component, and catch it at the endpoint? This is what I mean: Let's say we are on page /a. The Link will take the user to /b.

Passing Data Between React Components, Data in React applications is usually passed to components, via props. By using props Update data stored in Context. Create User Context. WIth Context in React, we create a global variable which is accessible throughout the application​. The simplest way to define a component is to write a JavaScript function: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

Comments
  • But why are you storing the component in a variable at all? React already does all the smart diffing for you based on what render() returns, so just use render() { return <Hello ...>; } and let React do its job.
  • @Mike'Pomax'Kamermans as I mentioned the problem is not just diffing and etc. I have around hundreds of components and I want to apply, filter and map these components with different logic and I want to add props completely dynamic.
  • Yeah: do that in render. Generate all your components as part of your render call, and if you have hundreds of components: organise them. React is a UI library, and your UI is always reducible to "things that control a handful of other things", not hundreds of things. Use state/props for the data that you're going to generat components off of, and then build those components in render(), and let React decide whether that means it actually rebuilds them or not. That's what it's designed for. Use the key property the way it's meant to and React does the rest.
  • I believe you are more concerned about other stuff rather than the question. There was a reason that I eliminated other stuff and just asked this question. I just want to know if in React ecosystem and API we have such a feature.
  • The problem with that is that you reduced your example to the point where it doesn't make sense: if what you're asking about is related to what you're showing, what you're showing is bad practice and don't do that. So please edit your question to something for which your question makes sense? The only true answer to your question paired with your code is "don't do this."
  • Thanks a lot @Asraful, this helped me a lot. Just used it and fixed my problem. Maybe I it is not efficient but what you showed is what I needed. 👍
  • As the answer from react official doc. I don't think about efficiency.