React + Axios - данные загружены в консольный журнал, но не отображаются в DOM?

Question

У меня проблема с моим простым приложением React.Я могу подключиться к API с помощью Axios и могу консоль журнала.Однако я не могу вывести данные внутри DOM.пусто почему?

import React, { Component } from 'react';

import axios from 'axios';

class App extends Component {

    state = {
        fragrances: []
    }

    componentDidMount() {
        axios.get('http://localhost:1337/fragrances')
        .then(res => {
        const fragrances = res.data;
        this.setState({ fragrances });
        })
    }

    render() {
    const { fragrances }  = this.state;
        return (
        <div>
        {
            fragrances.map((fragrance, index) => {
                <h2>{fragrance.Name}</h2>
                console.log(fragrance);
            })
        }
        </div>
        );
    }
}

export default App;

Answer 1

Вы ничего не возвращаете с вашего map

Это должно быть

fragrances.map((fragrance, index) => { 
    return Boolean(fragrance.Name) && <h2 key={index}>{fragrance.Name}</h2>  
})

Как уже упоминалось в комментариях, вам необходимо использовать ключ при возврате списков компонентов.Здесь я использую index, но это плохая практика ( read https://reactjs.org/docs/lists-and-keys.html#keys). Надеюсь, у ваших fragrance объектов есть уникальный id, который вы должны использовать.