How do i get the values of object in arrays react js

Question

Object { rows: (1) […], count: 3 } ​ My api is giving me this

count: 3 ​rows: Array [ {…} ] ​​0: Object { ELIGIBILITATE: "2022-04-10", BFA: "2022-04-11", id: "c53d945e-4bb1-49ab-91ca-c9e046ac5de7", … } ​​​Name:"Paul" ​​​BFA: "2022-04-11"

how to display the values in react? i've tried the following with no luck

   class Test extends React.Component{
constructor()
{
    super()
    this.state={
        row:[            
        ]
    }
}

componentDidMount()
{
    const axios = require('axios');

    // Make a request for a user with a given ID
    axios.get('myapi')
      .then( response =>{
        // handle success
        console.log(response);
        this.setState({row:response.data});
      })
      .catch(function (error) {
        // handle error
      console.log(error);
      })
      .then(function () {
        // always executed
      
      });
    
}

render() {

    const { row } = this.state;


    return (

      <div>

        <div>

          {Object.keys(row).map(([key, value]) => {
 console.log(row);
            return (

              <div>

                {key} = {value.Nume}

              </div>

            );

          })}

        </div>

      </div>

    );

}

} export default Test

Answer 1

TLDR:

That's because the value you're setting for state.row is an array.

Try this: this.setState({row:response.data.rows[0]});

Explanation

The response from your request - response.data - is an object with the following keys: count and rows.

count is self explanatory.

rows on the otherhand is returned as an array of objects, which is what you're setting the value of state.row to.

Since you're expecting an object and not an array of objects (An assumption from your render code), you'll need to extract it from the response as so response.data.rows[0]