How to add multiple inputs to an object for rendering in ReactJS

Question

New to React and can manage rendering single input values, but I'm trying to render the value of multiple inputs in a list form and can't get my head around it.

I'm trying to add the inputs into an object, and push the object into an array (this is the main issue i'm having), and then render the items in the array. I've used jobs as an example showing what I've managed so far... Can anyone guide me in the right direction?

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      post: {
        name: '',
        description: ''
      },
      jobs: []
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  };

  handleChange(e){
    this.setState({
      post.name: e.target.value,
      post.name: e.target.value
    })
  }

  handleSubmit(e){
    e.preventDefault();

// This is where i've trying to push the inputs into an object...

    this.setState({
      post.name: '',
      post.description: '',
      jobs: this.state.items.concat(this.state.post)
    })
  }

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

Any help will be massively appreciated!

Tholle · Accepted Answer · 2018-08-06 21:47:55Z

You need to render each field of an element in the jobs array separately because React can't render objects.

{ post.name: '', post.description: ''} is invalid JavaScript syntax. You must set post to a new object instead.

You can also use the name of the input to choose what field in the post object to update, so that you can share the same onChange handler for both inputs.

Example

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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

How to add multiple inputs to an object for rendering in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related