Iterating in React JSX

Question

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>
   )
 }
};

Answer 1

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