1

I am having a problem iterating in React jsx.

I want to make the code go 

  value={('this.props.message.text1)}
  value={('this.props.message.text2)}

But I'm having trouble with the coding in the "value={('this.props.message.text1)}" part.

I want to do something like

value={('this.props.message.' + key)}

Below is my code;

constructor(){
   super();
   this.state = {
     message: {
         text1: "hello1",
         text2: "hello2"
     }
   }
 }

renderMessage(key){
    return (
      <div className="fish-edit" key={key}>
        <input
        type="text"
        value={('this.props.message.' + key)}
        onChange={this.props.handleChange}
        />
      </div>
    )
  }

render() {
   return (
     <div>
       {Object.keys(this.props.message).map(this.renderMessage)}
     </div>
   )
 }
};
unico
  • 11
  • 2
  • I read your code, and I think you doesn't want `this.props.message` but `this.state.message`, do you ? – F. Kauder Jul 30 '16 at 09:40
  • Possible duplicate of [Dynamically access object property using variable](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) – Felix Kling Jul 30 '16 at 17:46

1 Answers1

2

use the squarebracket accessor notation, value={this.props.message[key]}

weisk
  • 2,468
  • 1
  • 18
  • 18