Answers for "Multiple items in Form onCLick()"

Multiple items in Form onCLick()

class App extends React.Component {
  state = {
    post: {
      name: "",
      description: ""
    },
    jobs: []
  };

  handleChange = e => {
    const { name, value } = e.target;

    this.setState(prevState => ({
      post: { ...prevState.post, [name]: value }
    }));
  };

  handleSubmit = e => {
    e.preventDefault();

    this.setState(prevState => ({
      jobs: [...prevState.jobs, prevState.post],
      post: { name: "", description: "" }
    }));
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <form>
          <input
            name="name"
            onChange={this.handleChange}
            type="text"
            value={this.state.post.name}
            placeholder="post name"
          />
          <input
            name="description"
            onChange={this.handleChange}
            type="text"
            value={this.state.post.description}
            placeholder="post description"
          />
          <button onClick={this.handleSubmit}>Submit</button>
        </form>
        <ul>
          {this.state.jobs.map((job, index) => (
            <li key={index}>
              {job.name}: {job.description}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));