How to have React evaluate a dynamic variable?

Question

I have the following:

    {this.props.fields.map(field => (
      <div key={field.skill_id}>
        <Field
          component={RadioGroup}
          name={ 'skill_id_' + field.skill_id }
          title={field.name}
          activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}}
          required={true}
          options={[
            { title: '1', value: '1' },
            { title: '2', value: '2' },
            { title: '3', value: '3' },
            { title: '4', value: '4' },
            { title: '5', value: '5' }
        ]} />

      </div>
    ))}

activeValue is not being evaluated correctly. I need this variable to be dynamically evaluated:

this.props.formState.skill_id_${field.skill_id}}

What am I doing wrong?

I get

syntax error: Unexpected token, expected } (57:82) 55
name={ 'skill_id_' + field.skill_id } 56
title={field.name} > 57
activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}}

Syntax error: Unexpected token, expected } (57:82) 55 | name={ 'skill_id_' + field.skill_id } 56 | title={field.name} > 57 | activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}} — AnApprentice, Jul 19 '17 at 05:18

Mayank Shukla · Accepted Answer · 2017-08-17T06:57:36.257

1

You are using a dynamic key to the get the value from object so use [] notation.

Write it like this:

activeValue={this.props.formState && 
  this.props.formState[`skill_id_${field.skill_id}`]}

Check this Snippet:

let obj = {
   a1: 1,
   a2: 2,
   a3: 3
};

[1,2,3].forEach(i => {

   console.log(`a${i} = `, obj[`a${i}`]);
   
})

Check the MDN doc for more details about template literals.

Check this answer for more details about bracket notation.

edited Aug 17 '17 at 06:57

answered Jul 19 '17 at 05:21

Mayank Shukla

100,735
18
158
142

That is awesome. thank you! Will accept when stackoverflow lets me – AnApprentice Jul 19 '17 at 05:22

score 1 · Answer 2 · answered Jul 19 '17 at 05:23

Make use of template literals to create a dynamic key and since it dynamic key, you should use the brackets notation for accesing an object property

this.props.formState[`skill_id_${field.skill_id}`]

Code:

{this.props.fields.map(field => (
  <div key={field.skill_id}>
    <Field
      component={RadioGroup}
      name={ 'skill_id_' + field.skill_id }
      title={field.name}
      activeValue={this.props.formState && this.props.formState[`skill_id_${field.skill_id}`]}
      required={true}
      options={[
        { title: '1', value: '1' },
        { title: '2', value: '2' },
        { title: '3', value: '3' },
        { title: '4', value: '4' },
        { title: '5', value: '5' }
    ]} />

  </div>
))}

How to have React evaluate a dynamic variable?

2 Answers2