Работа с массивами

Данный код выводит на экран массив учеников.

Пишем в файле index.js код:

import React from 'react';
import {render} from 'react-dom';

// массив учеников
const myArr = [
    {
        manKey: 1000,
        manName: "Maxim",
        manAge: 18
    },
    {
        manKey: 2000,
        manName: "George",
        manAge: 12
    },
    {
        manKey: 3000,
        manName: "Nina",
        manAge: 25
    }
];

// функция для вывода одного ученика
function PrintOnePupil(props) {
    const {paramsObj} = props;

    return (
        <div>
            Имя: {paramsObj.manName}
            <br/>
            Возраст: {paramsObj.manAge}
            <br/>
            <br/>
        </div>
    )
}

// функция для вывода массива учеников
function PrintAllPupils() {
    const mass = myArr.map((pupil) => {
        return <PrintOnePupil paramsObj={pupil} key={pupil.manKey} />
    }) ;

    console.log(myArr);
    console.log(mass);

    return (
        <div>
            {mass}
        </div>
    )
}

// функция для вывода всего содержимого
function PrintMain() {
    return (
        <div>
            <h2>Список учеников</h2>
            <PrintAllPupils/>
        </div>
    )
}

// выводим всё содержимое
render(<PrintMain/>, document.getElementById('root'));

Запускаем приложение

Пишем в консоли

npm start

Last updated

Was this helpful?