javascript - How do I map nested array into lists in React?

Question

I am having trouble mapping array of arrays as lists in React.

Here is my current react code:

import React, { Component } from "react";
import axios from "axios";

class BuySell extends Component {
  constructor() {
    super();
    this.state = {
      dataDepth: [],
    };
  }

  componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      console.log(getData);
      this.setState({
        dataDepth: [getData.data],
      });
    });
  }
  render() {
    const dataBuy = this.state.dataDepth.map((item, index) => {
      var listBuy = [item.buy];
      return <li key={index}>{listBuy}</li>;
    });

    return (
      <div>
        <h1>GET DATA:</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

export default BuySell;

The current output is:

• 4464800000.044890354464280000.000025644460200000.010089234460010000.148459314460000000.008713044458480000.000300004457940000.000256224457610000.148539244457490000.148543244...

(edited) what I expect:

• 4464800000
• 4464280000
• 4460200000
• 4460010000
• and so on

(the first index of each array items)

the API data is:

{
    "buy": [
        [
            447500000,
            "0.03443557"
        ],
        [
            447216000,
            "0.00022361"
        ],
        [
            447198000,
            "0.00234181"
        ],
        [
            447142000,
            "0.00002564"
        ],
so on
}

question from:https://stackoverflow.com/questions/65940010/how-do-i-map-nested-array-into-lists-in-react

Answer 1

As the OP expected response has changed, this will get you were you want to be.

  componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      console.log(getData);
      this.setState({
        dataDepth: getData.data.buy,
      });
    });
  }
  render() {
    const dataBuy = this.state.dataDepth.map(([number], index) => {
      return <li key={index}>{number}</li>;
    });

    return (
      <div>
        <h1>Coba get data</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

https://codepen.io/nihiser-the-sans/pen/MWbgzLY