Displaying rest api response data in react

Question

Here response data contains{name ,details} fields. I have a upload button to upload single/multi files. After uploading files, I don't refresh the page. Now for ex, I upload single file and displayed the response. Again I upload 2 files. Now I should be able to display response of current upload as well as previous one. It should be in the following format: 1.Name1 Details1 2. Name2 Details2 3. Name3 Details 3

          this.state.list = this.state.list.concat(details);
          this.state.list_name = this.state.list_name.concat(name);

             < form onSubmit={this.handleSubmit} >
                <label>
                    Upload a file: <br /><br />
                    <input type="file" name="file" multiple onChange{this.onChangeHandler}/>
                </label>
                <br /><br />
                <button type="submit">
                    Upload</button>
            </form >
            <ol>
               // {this.state.list_name.map((k) =>
                 //   <li>{k} :</li>)}
                //{this.state.list.map((k) =>
                //    <li>{k}</li>

               // )} 
             </ol>


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

       const formData = new FormData();
       for (var x = 0; x < this.state.selectedFile.length; x++) {
        formData.append('inputFile', this.state.selectedFile[x])

        fetch('url', {
            method: 'POST',
            body: formData
        }).then(res => {
            return res.json()
        })
            .then((res) => {
                this.setState({

                     details: res.data.details,
                    name: res.data.name
                })
                console.log("res data", res)
                //console.log("Data is", res.data.name) //displays name in the console
            })
            .catch(error => console.log('ERROR message'))
    }
  };

I have commented the code that I have tried. Thanks in advance.

Answer 1

you can do this

remove this

this.state.list = this.state.list.concat(details);
this.state.list_name = this.state.list_name.concat(name);

add this

fetch('url', {
            method: 'POST',
            body: formData
        }).then(res => {
            return res.json()
        })
            .then((res) => {
                const list = this.state.list;
                list.concat(res.data.details);
                const list_name = this.state.list_name;
                list_name.concat(name);
                this.setState({
                     list,
                     list_name,
                     details: res.data.details,
                     name: res.data.name
                })
                console.log("res data", res)
                //console.log("Data is", res.data.name) //displays name in the console
            })
            .catch(error => console.log('ERROR message'))
    }