5

I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my 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 is ugly and redundant, is there anyway i could do this dynamically?

1 Answer 1

6

How about defining an Answer component like this (only showing the 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 then on your parent component you just import it and use it 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 all your Answer components
        </div>                    
    );
}

Following Thylossus suggestion, here is an example using map:

var Answer = require('./answer.js');
//...

render() {
  // this is supposing you've got an 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>                    
  );
}
6
  • This could be further developed by using the map function to create the list of Answer components dynamically as in thinkster.io/iterating-and-rendering-loops-in-react. In this case, however, the key property has to be set as explained in here
    – Thylossus
    Commented Mar 26, 2016 at 14:21
  • @Thylossus I agree (and will add a short example using map) though it isn't clear from the sample what one could map on.
    – mfirry
    Commented Mar 26, 2016 at 14:28
  • You have this.state.answers() -- you mean this.state.answers.map(). It's personal preference, but I would just inline it in the JSX instead of assigning it to a variable and then interpolating that in the JSX. Also personal preference / depends on the situation, but Answer could just be defined in the same file, and could be a stateless functional component if it makes sense (essentially a helper function to return a ReactElement).
    – JMM
    Commented Mar 26, 2016 at 14:40
  • @JMM yes, Answer could totally be a stateless functional component. Not sure it comes easy to a react beginner though.
    – mfirry
    Commented Mar 26, 2016 at 14:59
  • @mfirry you're absolutely right. I just wanted to mention the option for reference. Thank you for including the example in your answer!
    – Thylossus
    Commented Mar 26, 2016 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.