0

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

//

Rob
  • 161
  • 2
  • 16

2 Answers2

0

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])
});
Amal Rajan
  • 31
  • 1
  • 2
  • 7
  • I get can not find the function “first_name” , i think person is empty --- it works fine from local json file save from postman response – Rob Dec 14 '19 at 02:57
0

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 );
Ujwal Arak
  • 45
  • 1
  • 3
  • 8