James James - 4 years ago 92
React JSX Question

Passing props to temperate literal in map

I'm trying to create a dynamic select box. I'm passing the row source data, and the name of key display name. I can't combine the data object with the string key or display name. Thanks!

const { rowSourceData, rowSourceKey, rowSourceDisplay } = this.props;
const rowSource = rowSourceData
.map(data => {
return (
<option key={data.`${rowSourceKey}`}> {data.`${rowSourceDisplay}`}</option>
)
})

Answer Source

Write it like this:

const { rowSourceData, rowSourceKey, rowSourceDisplay } = this.props;
const rowSource = rowSourceData
    .map((data,i) => {          
        return (
            <option key={i/*data[rowSourceKey]*/}> {data[rowSourceDisplay]}</option>            
        )       
    })

For Example:

obj = {a:1,b:2,c:3,d:4};
temp = 'c';
console.log(obj[temp]); // print 3;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download