How to display the value in the component from the server response in React?

Question

React

There is one caveat, they came like this now.

I do it wrong right away, because I tried everything until it worked out. But the logic is clear

import React, {Component} from 'react';
import Header from './Header';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Home extends Component{
    constructor(props){
        super(props);
    }
    componentWillMount(){
        axios.get('/api/test-thema').then(response => this.setState(response.data));
    }
    themaList(){
        console.log(this.state);
         for(let i = 0; i<this.state.length; i++){
/** Не знаю как правильно, пробовал и через map но тоже не получается у меня, То есть мне нужно вывести весь список в виде ссылки*/
             <li><Link to='/test/'+{this.state[i].id}>{this.state[i].name}</Link></li>
         }
    }
    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user.name}</div>
                <div>Должность: </div>
                
                <h3>Доступные тесты: </h3>
<ul>
                    {this.themaList()}//Сюда надо вывести список тем на тесты
                </ul>
                <h3>Доступные тренинги: </h3>
            </div>
        );
    }
}
const mapStateToProps = state => ({
    user: state.login.user
});

export default connect(mapStateToProps)(Home);

Answer 1

Since you have an object coming from the server, you need to work with it as with an object. Well, it's better to convert it to an array, since the keys still do not carry a semantic load in this case.

class Home extends Component{
    state = {items: []};

    componentWillMount(){
        axios.get('/api/test-thema')
            .then(response => this.setState({item: Object.values(response.data)}));
    }

    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user.name}</div>
                <div>Должность: </div>
                
                <h3>Доступные тесты: </h3>
                <ul>
                    {this.state.items.map((item) => (
                        <li key={item.id}><Link to='/test/'+{item.id}>{item.name}</Link></li>
                    ))}
                </ul>
                <h3>Доступные тренинги: </h3>
            </div>
        );
    }
}