Add items to list in ReactJS

Question

I want to add multiple items in my list on button click. My list looks like this:

constructor() {
  super();
    this.state = {
        movieData: 
        [
            {
                "MovieID": 1,
                "MovieName": "Iron Man",
                "LeadActor": "Robert Downey Jr.",
                "LeadActress": "Gwyneth Paltrow",
                "YearOfRelease": 2008,
                "Language": "English"
            },
            {
                "MovieID": 2,
                "MovieName": "Iron Man 2",
                "LeadActor": "Robert Downey Jr.",
                "LeadActress": "Gwyneth Paltrow",
                "YearOfRelease": 2010,
                "Language": "English"
            },
            {
                "MovieID": 3,
                "MovieName": "Thor",
                "LeadActor": "Chris Hemsworth",
                "LeadActress": "Natalie Portman",
                "YearOfRelease": 2011,
                "Language": "English"
            }
    ]
};

There should be a form with input elements that takes values: id, movie name, lead actor, lead actress, year of release, language.

Now, I have found solutions to add item to an array, which is this:

this.setState(prevState => ({
    myArray: [...prevState.myArray, 1]
}));

But, even with this method, I can add only single item on button click.

How can i add multiple items to my list in this format:

{
       "MovieID": some value,
       "MovieName": "some value",
       "LeadActor": "some value",
       "LeadActress": "some value",
       "YearOfRelease": some value,
       "Language": "some value"
}

Answer 1

Here is the complete examples. Here I set a movie object to an array movieData in state in constructor. In every input field, I bind handleChange in onChange event and get input from input element to set movie object that is available in state. then after submitting form, I push that movie object to movieData array. Finally I used MUIDatatable where I passed movieData to show all movies. Hope it helps you.

import React, {useState, useEffect, Component} from 'react';
import MUIDataTable from "mui-datatables";

class MultiItems extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            movieData: [
                {
                    "MovieID": 1,
                    "MovieName": "Iron Man",
                    "LeadActor": "Robert Downey Jr.",
                    "LeadActress": "Gwyneth Paltrow",
                    "YearOfRelease": 2008,
                    "Language": "English"
                }
            ],
            movie: {}
        }
    }

    columns = ["MovieID", "MovieName", "LeadActor", "LeadActress", "YearOfRelease", "Language"];
    options = {
        filterType: "dropdown",
        responsive: "scroll"
    };

    handleChange = e => {
        this.name = e.target.name;
        this.value = e.target.value;
        this.setState(prevState => {
            return {
                movie: {
                    ...prevState.movie,
                    [this.name]: this.value
                }
            }
        });
    };

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

        let lastMovie = this.state.movieData[this.state.movieData.length -1];

        this.setState(prevState => {
            const movieData = prevState.movieData.concat({...prevState.movie, MovieID: lastMovie.MovieID + 1});
            return {
                movieData,
                movie: {},
            };
        });
    };

    render() {
        return (
            <div className='container'>
                <div className='row'>
                    <div className='col-4'>
                        <form onSubmit={this.handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="MovieName">Movie Name</label>
                                <input type="text" name='MovieName' value={this.state.movie.MovieName}
                                       onChange={this.handleChange}
                                       className="form-control" id="MovieName"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actor</label>
                                <input type="text" name='LeadActor' value={this.state.movie.LeadActor}
                                       onChange={this.handleChange} className="form-control" id="LeadActor"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actress</label>
                                <input type="text" name='LeadActress' value={this.state.movie.LeadActress}
                                       onChange={this.handleChange} className="form-control" id="LeadActress"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Year Of Release</label>
                                <input type="text" name='YearOfRelease' value={this.state.movie.YearOfRelease}
                                       onChange={this.handleChange} className="form-control" id="YearOfRelease"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Language</label>
                                <input type="text" name='Language' value={this.state.movie.Language}
                                       onChange={this.handleChange} className="form-control" id="Language"/>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                        <MUIDataTable
                            title={"Movies"}
                            data={this.state.movieData}
                            columns={this.columns}
                            options={this.options}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default MultiItems;

Answer 2

setNewState = movies => {
    this.setState({
        // Concats the two arrays into one
        myArray: [...this.state.myArray, ...movies]
    })
}

Reference to spread syntax

Above code allows you for concatenating the two arrays into one.

Equal to:

setNewState = movies => {
    this.setState({
        // Concats the two arrays into one
        myArray: this.state.myArray.concat(movies)
    })
}

Reference to concat syntax