Алексей Уколов

Поскольку у вас с сервера приходит объект, то и работать с ним нужно как с объектом. Ну а лучше преобразовать в массив, поскольку ключи всё равно смысловой нагрузки не несут в данном случае.

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>
        );
    }
}

Корректно ли такая операция?

Будет ли она работать? Да, будет. Правильна ли она с точки зрения Реакта? Скорее всего, нет. Смысл Ректа в том, чтобы вы манипулировали объектом состояния, а он уже строил нужный DOM сам.

К какому DOM'у я обращаюсь, виртуальному?

К обычному.

payload: {value} // payload: {value: 'foo'}
vs
payload: value // payload: 'foo'

Новая нотация в ECMAScript 2015

Как решить данную проблему с React?

Прочитать документацию.

return (
    <div>
      <h1> Hello</h1>
      <section> Body</section>
    </div>
  )

может есть более изящное решение на React?

Конечно есть. Вы в обработчике должны менять state, при изменении state будет вызван метод render и всё автоматически перерисуется. Вообще забудьте про работу с DOM, в этом весь смысл использования React.

class App {
    constructor(props) {
        super(props);

        this.submitNote = this.submitNote.bind(this);

        this.state = {
            userInput: ``,
            shouldShowElem: false,
        };
    }

    submitNote() {
        this.setState({
            shouldShowElem: true,
        });
    }

    render() {
        return (
            <div className="data">
                Input here

                {this.state.shouldShowElem &&
                <div className="elem">{this.state.userInput}</div>
                }

                <button onClick={this.submitNote}>Click Me</button>
            </div>
        );
    }
}

Типовой и примитивный случай описывается так:

UsersList.propTypes = {
    loading: PropTypes.bool
};

В Modal вообще state не нужен - https://codepen.io/anon/pen/bRWOKG?editors=0010

Этот атрибут не поддерживается.