How can I render an Array nested in another Array with React

Question

I am trying to create a currency converter and I want to show a list with the currency and the value. I am getting some data using axios from an API and my data looks like this:

Object {type: "li", key: "0", ref: null, props: Object, _owner: null…}
type: "li"
key: "0"
ref: null
props: Object
 children: Array[33]
 0: Object
  name: "AUD"
  value: 1.5167896679
 1: Object
 2: Object

...

When I try to map the data it is not showing anything:

import React from "react";
import axios from "axios";

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: null,
      fromCurrency: "USD",
      currencyList: []
    };
  }

  componentDidMount() {
    this.getCoinTypes();
  }

  getCoinTypes() {
    let currency = [];

    axios
      .get(
        `https://alt-exchange-rate.herokuapp.com/latest?base=${
          this.state.fromCurrency
        }`
      )
      .then(response => {
        currency.push(
          Object.keys(response.data.rates).map(k => ({
            name: k,
            value: response.data.rates[k]
          }))
        );

        this.setState({
          currencyList: currency
        });

        this.state.currencyList.map((val, index) => {
          return console.log(<li key={index}>{val}</li>);
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    return (
      <table className="table table-sm bg-light mt-4">
        <thead>
          <tr>
            <th scope="col" />
            <th scope="col" className="text-right pr-4 py-2">
              5.00
            </th>
          </tr>
        </thead>
        <tbody>
          {this.state.currencyList.map((val, index) => {
            <tr key={index}>
              <th>{index}</th>
              <th>{val}</th>
            </tr>;
          })}
        </tbody>
      </table>
    );
  }
}

export default Table;

What I am want to achieve is e.g:

USD 1.00
AUD 1.95

and so on...

The link to sandbox

You need a render function to get your data into the browser. Is React not throwing errors about your class? — BEVR1337
– BEVR1337, Commented Feb 25, 2020 at 20:41
I am working in codesanbox, and using console.log to see how it looks — ferolo3000
– ferolo3000, Commented Feb 25, 2020 at 20:43
Can you attach a link to your answer so we have all the code to work with? — BEVR1337
– BEVR1337, Commented Feb 25, 2020 at 20:43
Sure! this is my link: codesandbox.io/s/react-props-practice-t8dtu — ferolo3000
– ferolo3000, Commented Feb 25, 2020 at 20:44
Can I recommend adding that link to your original post? It helps us dense stack exchange users. — BEVR1337
– BEVR1337, Commented Feb 25, 2020 at 20:48

JorgeObregon · Accepted Answer · 2020-02-25 20:55:23Z

1

Is this what you needed? https://codesandbox.io/s/react-props-practice-tsvbu

If yes, what I did was to save the currency "label" (USD, AUD, etc) and it's "value" (1.00, 1.69, etc)

answered Feb 25, 2020 at 20:55

JorgeObregon

3,3701 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BEVR1337 Over a year ago

Throwing an error for non-unique keys. I suggest concatenating the array index with the currency label for a key.

JorgeObregon Over a year ago

Updated sandbox. Fixed error for non-unique keys. Cleaned up Table.jsx

David Caldwell · Accepted Answer · 2020-02-25 20:55:13Z

0

Here is a working code sandbox

https://codesandbox.io/embed/react-props-practice-94t49?fontsize=14&hidenavigation=1&theme=dark

Changed this on line 60 of Table.jsx

          {this.state.currencyList.map((val, index) => {
            return (
              <tr key={index}>
                <th>{index}</th>
                <th>{val.value}</th>
              </tr>
            );
          })}

answered Feb 25, 2020 at 20:55

David Caldwell

631 silver badge7 bronze badges

Collectives™ on Stack Overflow

How can I render an Array nested in another Array with React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related