fjckls fjckls - 1 month ago 7
React JSX Question

Set component's props dynamically

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?

Answer

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>