How to iterate through an Array of objects in React

Question

I'm a real noob for react. (Come from a java background lol). I've been struggling with trying to render an array of objects from the cryptocompare api. The api looks like this using console.log(data.Data)

0: {CoinInfo: {…}, RAW: {…}, DISPLAY: {…}}

1: CoinInfo: Algorithm: "Ethash" AssetLaunchDate: "2015-07-30" BlockNumber: 11354985 BlockReward: 2.2818216676269 BlockTime: 13.133262903712646 DocumentType: "Webpagecoinp" FullName: "Ethereum" Id: "7605" ImageUrl: "/media/20646/eth_logo.png" Internal: "ETH" MaxSupply: -1 Name : "ETH" NetHashesPerSecond: 301850977727331 ProofType: "PoW"

so on and so forth. I am trying to render for now specifically the name of the coin.

My code is as follows:

constructor(props) {
    super(props);
    this.state = {
      names: []

    };
  }

  async getData() {
    const response = await axios.get(endpoint)
    const data = response.data;
    console.log(data.Data[0].CoinInfo.Name)
    this.setState({

      names: data.Data
    })
  }

  async componentDidMount() {
    await this.getData();
  }

  render() {

    return (
      <div>
        {this.state.names.map((name, i) => {

          <div key={i}>
            <li>
              // Not sure what to put here....
              {name[i]}
            </li>
          </div>
        })}
      </div>

    );
  }
}

Now I've been playing around with it for a couple of hours to no avail. I keep getting blank screens or uncaught reference. If someone can point me in the right direction that would be awesome. Thank you.

Answer 1

In this section here:

 <div>
        {this.state.names.map((name, i) => {

          <div key={i}>
            <li>
              // Not sure what to put here....
              {name[i]}
            </li>
          </div>
        })}
      </div>

You should checkout how the map function works in the first place. Instead of name , you should name the individual element inside your array (each coin). So it's gonna become something like this:

<div>
    {this.state.names.map((coin, i) => {

      <div key={i}>
        <li>
          
          {coin.name}
        </li>
      </div>
    })}
  </div>

where name is just a attribute of the json object coin . Does this make sense?

Answer 2

First of all, you have to return something from your map callback:

{
 this.state.names.map((name, i) => {
   return (
     <div key={i}>
       <li>
         // Not sure what to put here....
         {name[i]}
      </li>
     </div>
   )
 })
}

or you can use another variant:

this.state.names.map((name, i) => (
  <div>...</div>
)

The second one - your name is the object {CoinInfo: {…}, RAW: {…}, DISPLAY: {…}} So if you want to put a name inside li just get it as you do above: name.CoinInfo.Name .

{
 this.state.names.map((name, i) => {
   return (
     <div key={i}>
       {name.CoinInfo.Name}
     </div>
   )
 })
}

If you don't sure about name just console log this inside your callback before return JSX.

BTW you don't need to use await this.getData() just this.getData() and don't make componentDidMount() async. And don't use <li> tag without - or just put name inside div without <li>