реагировать на получение значений по одному

Question

Я работаю над викториной реакцией. Я хочу показать один вопрос и их выбор одновременно на странице. Такие как : «question»: «Когда впервые появился язык программирования C?», а.) 1970 б.) 1971 с.) 1972 года д.) 1973 Это то, что я сделал до сих пор:

import React from 'react'
import axios from 'axios'
class QuizApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {entered: false, correct: 0, wrong: 0}

    }

    state = {
        questions: [],
        choic: []
    };

    componentDidMount() {
        axios.get("http://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions").then((response) => {
            const questions = response.data;
            this.setState({questions});
            const choic = response.data;
            this.setState({choic});
            console.log(response);
        })
    }

    nickChange = (event) => {
        this.setState({username: event.target.value});

    };
    cleanPage = () => {
        this.setState({
            entered: true
        })

    };

    render() {

        if (!this.state.entered) {
            return (
                <div>
                    <form target="_self" id="firstPage">
                        <input  type="text" value={this.nick} onChange={this.nickChange}/>
                        <input type="submit" value="Start" name="cleanPage" onClick={this.cleanPage}/>
                    </form>
                </div>
            )
        }
        else {
            return (
                <div>
                    <ul>
                        {this.state.questions.map(que => <li>{que.question} </li>)}
                        {this.state.choic.map(cho => <li>{cho.choices.choice} </li>)}
                    </ul>

                </div>
            )
        }
    }
}

Answer 1

упростить заданное состояние в ответе

const { questions, choices } = response.data;
this.setState({questions, choices});   

При рендеринге делайте так (при условии, что у каждого вопроса есть соответствующий массив вариантов в этом индексе):

{this.state.questions.map((que, index) => {
  <React.Fragment>
  <li>{que.question} </li>
    <ul>
      {choices[index].map(choice => <li>{choice}</li>)
    </ul>
  <React.Fragment
})}

стиль элементов по мере необходимости