How to create a dynamic prop name in React?

Question

Is it possible to create the name of a prop dynamically? For example:

let dynamicPropName = "someString";  <MyComponent dynamicPropName="some value" /> 

so that inside MyComponent, this.props.someString exists.

Answer 1

If you are using es6, you can define the dynamic prop:

let dynamicProps = {"dynamicKey":"someString", "dynamicKey2":"someString"}; 

or

let someVariable = "xyz"; dynamicProps[someVariable] = value; 

then use the spread operator:

<MyComponent {...dynamicProps} /> 

Inside MyComponent -

let props = {...this.props}; 

Now you can use Object.keys on props to get all dynamic prop names.

Edit: Added an example

class Test extends React.Component {        renderFromProps() {      return Object.keys(this.props)      .map((propKey) =>        <h3>{this.props[propKey]}</h3>      );    }    render() {      return (       <div>        <h1>One way </h1>        <hr/>        <h3>{this.props.name}</h3>        <h3>{this.props.type}</h3>        <h3>{this.props.value}</h3>        <hr/>       <h1> Another way </h1>        <hr/>        { this.renderFromProps()}       </div>     );    }      }    const dynamicProps = { name:"Test", type:"String", value:"Hi" };    ReactDOM.render(    <Test {...dynamicProps} />,    document.getElementById('root')  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="root">  </div>