How to print out an array of user inputs in ReactJs

Question

Currently my code will print out what ever the user types into the input box after they have submitted it. If I type 'Dave', that gets printed out. If I then type 'Paul'. Paul replaces where Dave has been outputted. I want a way where if I type out another name instead of replacing it, it will print it out underneath, unlimited times. I am thinking of using an array instead of the current string but not sure how to do this. here is my code so far:

var ToDoForm = React.createClass({

    getInitialState: function() {
      return {text: '', submittedValue: ''};
    },
    handleChange: function(event) {
      this.setState({text: event.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      this.setState({submittedValue: this.state.text});
      console.log("ToDO: " + this.state.text);
    },

    render: function() {
      return (
          <div>
            <h1> todos </h1>

            <form className="todoForm" onSubmit={this.handleSubmit}>
              <input
                  type="text"
                  placeholder="Type out a task"
                  value={this.state.text}
                  onChange={this.handleChange}
                  />
              <input
                  type="submit"
                  value="Submit todo"
                  />
            </form>

            <h2> Data should appear here </h2>
              <p>{this.state.submittedValue}</p>
          </div>
      );
    }

  });

So far text gets assigned to submittedValue and then submitted value is what gets printed out.

I have started with this

getInitialState: function() {
      return {text: '', submittedValue: []};
    },

but now I am stuck as to what to do next

Davin Tryon · Accepted Answer · 2015-11-24 11:54:07Z

3

Once sumittedValue is an array in state. You should be able just to push to it:

handleSubmit: function(e) {
      e.preventDefault();
      this.state.subittedValue.push(this.state.text);
      this.setState({submittedValue: this.state.subittedValue});
      console.log("ToDO: ", this.state.submittedValue);
    },

Of course then you have to loop through the array (map) in order to render:

<h2> Data should appear here </h2>
{this.state.submittedValue.map(
    function(value, i) { 
        return (<p key={'val-' + i}>{value}</p>);
    }
)}

key is required to uniquely identify the looped <p>. Otherwise, a warning would show on render.

edited Nov 24, 2015 at 11:54

answered Nov 24, 2015 at 11:00

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhargav Ponnapalli Over a year ago

Good answer. Also, this.setState in the handleSubmit is important. The push is not enough to trigger the render. You might want to emphasize that.

The Hurricane Over a year ago

this seems good but I have a question. where you have the <div>, I want <p>{listItems}</p>. how do I then extract your <div> content and put this into the render return part?

Davin Tryon Over a year ago

@TheHurricane you shouldn't need the <div> if you don't want it. But you do need the map. I made an edit and took out the <div>.

Naveen Setty Over a year ago

it will show warning in the console because of key is not set for p tag, actually its important while writing in reactJS

Collectives™ on Stack Overflow

How to print out an array of user inputs in ReactJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related