React: rendering multiple user inputs

Question

I have a form containing several inputs and I am handling multiple user inputs but I want to display all the inputs when the submit button is clicked.

What do I need to add/change in my code to display the inputs when they are submitted?

class Planning extends React.Component {
   constructor() {
     super()
     this.state = { 
       title: '',
       goal: '',
       tech: '',
       features: '',
       details: ''
    }

     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }

handleChange(event) {

this.setState({ 
  [event.target.name]: event.target.value 
})
}

handleSubmit(event) {
alert(`Plan:  ` )
event.preventDefault()
}
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
        <div>
          <label class="label-title">
            Project Title:</label>
            <input name="title" id="title" type="text" onChange={this.handleChange}/>
            </div>
            <div>
          <label class="label-goal">
          Motivational Goal: </label>
          <input name="goal" id="goal" type="text" onChange={this.handleChange}/>
          </div>
          <div>
        <label class="label-tech">
        Technologies/tools:</label>
        <input name="tech" id="tech" type="text" onChange={this.handleChange}/>
        </div>
        <div>
      <label class="label-features">
      Features:</label>
      <input name="features" id="features" type="text" onChange={this.handleChange}/>
      </div>
      <div>
    <label class="label-details">
    Other details: </label>
    <input name="details" id="details" type="text" onChange={this.handleChange}/>
    </div>
          <input class="submit" type="submit" value="Submit" />
        </form>
      )
    }
  }

Gabriele Petrioli · Accepted Answer · 2020-02-02 21:09:38Z

1

The values are stored in the state so you could

handleSubmit(event) {
  event.preventDefault();
  alert(`Plan:\n${JSON.stringify(this.state,null,2)}`);
}

or the more explicit approach

handleSubmit(event) {
  const {
    title,
    goal,
    tech,
    features,
    details
  } = this.state;
  event.preventDefault();
  alert(`Plan:  
    Title: ${title}
    Goal: ${goal}
    Tech: ${tech}
    Features: ${features}
    Details: ${details}
  `);
}

edited Feb 2, 2020 at 21:09

answered Feb 2, 2020 at 19:01

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

SK1dev Over a year ago

Thank you very much, I used the second approach and it worked! @GabrielePetrioli

Collectives™ on Stack Overflow

React: rendering multiple user inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related