Display data from API

Question

i have the following code in parent.js file which gets data from API using axios which is working fine

//Parent.js

    componentDidMount() {
      axios.get('URL', {
                    method: 'GET',
                    headers: {
                        'key': 'apikeygoeshere'
                    }
                })
                    .then((response) => {
                        this.success(response);
                    })

            }

            successShow(response) {
                this.setState({
                    person: response.data.data.Table
                });
     }


   render() {
      return (
         <div class="row">
                {this.state.person.map(results => (
                    <h5>{results.first_name}</h5>
              )
              )
             }

and the above code display data from api perfect. i want to display api data in child component instead of displaying data from json file. In child component i have the following code which display data from local.json file

//

Answer 1

The issue is in the successShow function the you cannot change the array state value like that. According to the answer from here :

Correct modification of state arrays in ReactJS

You can update the state like this:

this.setState(prevState => ({
person: [...prevState.person,response.data.data.Table]
    });

or

this.setState({
person: this.state.person.concat([response.data.data.Table])
});

Answer 2

Try using

const data = this.state.person && this.state.person.find(item => item.id === id);


const relatedTo = this.state.person && this.state.person.filter( item => item.manager_id === data.manager_id && item.id !== data.id );