@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')
);
  • Вопрос задан
  • 213 просмотров
Решения вопроса 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
Похожие вопросы
New Med Solutions Москва
от 150 000 до 250 000 руб.
YLab Тольятти
от 70 000 до 130 000 руб.