How to create a dynamic prop name in React?

Question

Is it possible to dynamically create a propeller name? For instance:

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

so this.props.someString exists inside MyComponent.

Answer 1

If you are using es6 , you can define dynamic support:

 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 names.

Edit: Added 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>