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

Question

У меня есть родительский компонент и два дочерних компонента.

Основная цель - два отображения 3 имен друг под другом (список не нужен, только для разрыва строки):

Ожидаемый результат (три полных имени друг под другом без списка:

• имя1 фамилия1
• имя2 фамилия2
• имя3 фамилия3

Все имена в одном массиве firstName = ["Charles", "Scott", "Peter"] и все фамилии в другом массиве lastName = ["Xavier", "Саммерс "," Паркер "]

Они должны проходить мимо дочерних компонентов (Child1.js) и (Child2.js) в качестве реквизита иотображается в App.js ранее упомянутым способом.

Мой текущий код (ниже) отображает сначала все 3 имени, а затем все 3 фамилии ниже друг друга. Что мне нужноизменить, чтобы сделать это таким образом?

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from "./Child1.js"
import Child2 from "./Child2.js"

class App extends React.Component {
  render() {
    const firstNames = ["Charles", "Scott", "Peter"];
    const lastNames = ["Xavier",  "Summers", "Parker"]
    return (
      <div>
        <Child1 firstNames={firstNames} /> <Child2 lastNames={lastNames} />
      </div>
    );
  }
}

export default App;

Child1.js (firstNames)

import React from "react";

class Child1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.firstNames.map((element, index) => (
          <h1 key={index}>{element}</h1>
        ))}
      </div>
    );
  }
}
export default Child1;

Child2 (lastNames)

import React from "react";

class Child2 extends React.Component {
  render() {
    return (
      <div>
        {this.props.lastNames.map((element, index) => (
          <h1 key={index}>{element}</h1>
        ))}
      </div>
    );
  }
}
export default Child2;

Answer 1

вам нужно отобразить внутри основного компонента, чтобы перебрать два массива:

import React from "react";
import ReactDOM from "react-dom";
import Child1 from "./Child1";
import Child2 from "./Child2";

class App extends React.Component {
  render() {
    const firstNames = ["Charles", "Scott", "Peter"];
    const lastNames = ["Xavier", "Summers", "Parker"];
    return (
      <div>
        {firstNames.map((el, i) => (
          <div key={i} style={{display: 'flex'}}>
            <Child1 firstNames={el} /> <Child2 lastNames={lastNames[i]} />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

, а затем для ребенка1

import React from "react";

class Child1 extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.firstNames}</h1>
      </div>
    );
  }
}
export default Child1;

то же самое для child2.Я запускаю это на codeSandBox и оно работает для меня.