Laravel: React kaupimas masyve

//resources/assets/js/components/App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';


class App extends Component {

    constructor(props){
        super(props);
        //saugosime žinutes posts masyve
        this.state ={ 
            body:'',
            posts: []
        }
        // bind 
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
  

    handleSubmit(e){
       e.preventDefault(); //stop refresh after submit
       // siunčiame post su turiniu body
       // gautą atsakymą išvedame ir sujungiame su buvusiu post masyvu
       //išvalome body
        axios.post('./posts',{
            body: this.state.body
        }).then(response => {
            console.log(response);
            this.setState({
                posts: [...this.state.posts, response.data],
                body: ''
            })
        });
    }    

    postData(){
        axios.post('./posts',{
            body: this.state.body
        });
    }

    handleChange(e){
       this.setState({
            body: e.target.value
       })
    } 

    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-6">
                        <div className="card">
                            <div className="card-header">Tweet something</div>

                            <div className="card-body">
                                <form onSubmit={this.handleSubmit}>
                                    <div className="form-group">
                                        <textarea 
                                            onChange={this.handleChange}
                                            value={this.state.body}
                                            className="form-control" 
                                            rows="5" 
                                            maxLength="140" 
                                            placeholder="whats up?" 
                                            required/>
                                    </div>   
                                        <input
                                            type="submit"
                                            value="Post"
                                            className="form-control" 
                                            />   

                                </form>       
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="card">
                            <div className="card-header">Recent tweets</div>

                            <div className="card-body">
state esačius įrašus mapinam į atskirus elementus ir juos atvaizduojame
key reikalingas react'ui atskirti elementus
{this.state.posts.map(post => <div key={post.id}>{post.body}</div>)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

rezultate: