Passing props to temperate literal in map

Question

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>            

      )       

  })

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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;

Passing props to temperate literal in map

Sign up