@hollanditkzn

Как выводить объект с много вложенности в react?

Не могу понять как выводить объекты которые имеют много вложенности и при этом чтобы не писать каждый раз отдельный блок, а они повторялись. Допустим там есть props.thema.test[0], props.thema.test[1],props.thema.test[2] и также к ответы должны быть (answer);
Вот мои пример. это тесты.
https://codepen.io/rusline/pen/JMmJQM?editors=0010
Если не отверывается вот
код
const thema = [{
  id: 1, 
  name: 'Тема первая',
  test: [
    [{
    id: 1,
    name: 'Вопрос 1',
    id_theme: 1,
    answer: [ { id: 1, text: 'да', id_question: 4, answer: 0 },
 { id: 2, text: 'нет', id_question: 4, answer: 0 },
 { id: 3, text: 'не помню', id_question: 4, answer: 1 } ] },
  {
    id: 2,
    name: 'Вопрос 2',
    id_theme: 1,
    answer: [ { id: 4, text: 'да', id_question: 4, answer: 0 },
  { id: 5, text: 'нет', id_question: 4, answer: 0 },
  { id: 6, text: 'не помню', id_question: 4, answer: 1 } ] },
  {
    id: 4,
    name: 'Вопрос 3',
    id_theme: 1,
    answer: [{ id: 7, text: 'да', id_question: 4, answer: 0 },
  { id: 8, text: 'нет', id_question: 4, answer: 0 },
  { id: 9, text: 'не помню', id_question: 4, answer: 1 }] }]  
  ]
}]

class Form extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
        <div className='container'>
          <h1>{props.thema.name}</h1>
          <form>
            <div className='question'>
              <p>{props.thema.test.name}</p>
              <ul>
                <li>
                  <input type='radio' name={props.thema.test.answer.id_question.text}/>
                  <button>Ответить</button>
                </li>  
              </ul>  
            </div>  
          </form>  
        </div>
    )
  }
}

ReactDOM.render(
  <Form thema={thema} />,
  document.getElementById('root')
);
  • Вопрос задан
  • 193 просмотра
Решения вопроса 2
  • rockon404
    @rockon404
    Frontend Developer
    Используйте метод массива map:
    class Form extends React.Component{
      render(){
        const { thema } = this.props;
        
        return(
          <div>
            {thema.map(({ id, name, test }) => (
              <div key={id} className='container'>
              <h1>{name}</h1>
              <form>
                {test.map(question => (
                  <div 
                    key={question.id}
                    className='question'
                  >
                    <p>{question.name}</p>
                      <ul>
                        {question.answer.map(answer => (
                          <li key={answer.id}>
                            {answer.text}
                            <input
                              type='radio'
                              name={answer.id_question}
                            />
                            <button>Ответить</button>
                          </li>  
                        ))}
                     </ul>  
                  </div>  
                ))}
              </form>  
            </div>
            ))}
          </div>
        );
      }
    }


    Обратите внимание на обязательное свойство для элементов списка key.
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы