Как передать массив объектов из родительского компонента в дочерний компонент в реакции - PullRequest
Новая
       9

Как передать массив объектов из родительского компонента в дочерний компонент в реакции

0 голосов
/ 10 марта 2020

Я работаю над проектом react.

У меня есть массив объектов в компоненте Parent, как передать массив объектов от родителя к потомку в react

Parent.Component 

import React from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  const students = [
    {
      name: "Mark",
      age: 21
    },
    {
      name: "Williams",
      age: 24
    }
  ]
  return (
    <div className='App'>
      <Child studentsArrayOfObject = { students }></Child>
    </div>
  )
}

export default App

Child.Component 

import React from "react";
import "./Child.css";

function Child(props) {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="Child">
            {props.studentsArrayOfObject.map(student => (
              <li>{student}</li>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Child;

Ответы [ 3 ]

0 голосов
/ 10 марта 2020

Попробуйте получить свойства объектов и отобразить их в JSX. Вы пытаетесь отобразить весь массив как дочерний элемент React. Это недействительно Вы должны перебрать массив и визуализировать каждый элемент. Измените свой дочерний компонент на следующий пример 

import React from 'react';
import './Child.css';
function Child(props) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Child'>
                      {props.studentsArrayOfObject.map(student => (
                        <li key={student.name}>{student.name}</div>
                        <li key={student.age}>{student.age}</div>
                      ))}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child
0 голосов
/ 10 марта 2020

Вы не можете просто визуализировать объект ученика, я изменил его на student.name здесь. 

<div className="Child">
    {/* {props.studentsArrayOfObject.map(student => (
        <li>{student}</li>
    ))} */}
    {props.studentsArrayOfObject.map(student => (
        <li>{student.name}</li>
    ))}
</div>

Вот онлайн-демонстрация: https://codesandbox.io/s/so-60612610-y9y5z

0 голосов
/ 10 марта 2020

Вы не должны печатать объект напрямую, получать какое-либо свойство от объекта и отображать, как показано ниже. пример: имя. 

{props.studentsArrayOfObject.map(student => <li>{student.name}</li>)}
...