javascript - How can i create input text fields dynamically in react js - JSX? -

i'm pretty new reactjs, came across scenario i've create 6 input fields similar each other. right i've in render method of class,

render () {     return (         <div>             <p>                 <label htmlfor="answer1">answer:</label><br/>                 <input                 type="text"                 name="answer1"                 id="answer1"                 classname="answer"                 value={this.state.answer1}                 onchange={this._handlechange}                 />             </p>             <p>                 <input                 type="text"                 name="answer2"                 id="answer2"                 classname="answer"                 value={this.state.answer2}                 onchange={this._handlechange}                 />             </p>             <p>                 <input                 type="text"                 name="answer3"                 id="answer3"                 classname="answer"                 value={this.state.answer3}                 onchange={this._handlechange}                 />             </p>             <p>                 <input                 type="text"                 name="answer4"                 id="answer4"                 classname="answer"                 value={this.state.answer4}                 onchange={this._handlechange}                 />             </p>             <p>                 <input                 type="text"                 name="answer5"                 id="answer5"                 classname="answer"                 value={this.state.answer5}                 onchange={this._handlechange}                 />             </p>             <p>                 <input                 type="text"                 name="answer6"                 id="answer6"                 classname="answer"                 value={this.state.answer6}                 onchange={this._handlechange}                 />             </p>         </div>     ); } 

the code ugly , redundant, there anyway dynamically?

how defining answer component (only showing render method):

render() {   return (     <p>         <label htmlfor={this.props.name}>answer:</label>         <input           type="text"           name={this.props.name}           classname="answer"           value={this.props.value}           onchange={this.props.handlechange}         />     </p>     ); } 

and on parent component import , use like:

var answer = require('./answer.js'); //..  render() {     return (         <div>           <answer name="answer1" value={this.state.answer1} handlechange={this._handlechange} />           <answer name="answer2" value={this.state.answer2} handlechange={this._handlechange} />           <answer name="answer3" value={this.state.answer3} handlechange={this._handlechange} />           // add answer components         </div>                         ); } 

following thylossus suggestion, here example using map:

var answer = require('./answer.js'); //...  render() {   // supposing you've got answers array of { name: ..., value: ...} object   var answers = this.state.answers.map(function(a) {     return(<answer name={a.name} value={a.value} handlechange={this._handlechange} />)   });   return (     <div>       { answers }     </div>                       ); }