Set component's props dynamically

jsx, reactjs

Solution

The proper way is to use React's cloneElement method (https://facebook.github.io/react/docs/react-api.html#cloneelement). You can achieve what you want by doing:

<span>
  {
    React.cloneElement(
      component,
      {title: item.title}
    )
  }
</span>

Problem

I need to set component's props after it is stored in a variable, here is pseudo code: ``` render(){ let items = [{title:'hello'}, {title:'world'}]; let component = false; switch (id) { case 1: component = <A /> break; case 2: component = <B /> break; } return( items.map((item, index)=>{ return( <span> {/* SOMETHING LIKE THIS WOULD BE COOL - IS THAT EVEN POSSIBLE*/} {component.props.set('title', item.title)} </span>11 ) }) ) } ``` Inside `return` I run a loop where I need to set props for the component that is stored inside a variable.... How to set props for this component which I stored earlier in a variable?

Original source