How to use map on multi objects array in React

Question

This is child component as i can you Props here Child Component:

import React from "react";

const PeopleList = props => {
  console.log("child Props :", props.data);
  const list = props.data.map(item => item.name);

  return <React.Fragment>{"list"}</React.Fragment>;
};

export default PeopleList;

Main Component:

 import React, { Component } from "react";
    import { connect } from "react-redux";
    import { fetchPeople } from "../actions/peopleaction";
    import PeopleName from "../containers/peopleName";

    class Main extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      componentDidMount() {
        this.props.dispatch(fetchPeople());
      }

      render() {
        const { Error, peoples } = this.props;

        console.log("data", peoples);
        return (
          <div className="main">
            {"helo"}
            <PeopleName data={peoples.results} />
          </div>
        );
      }
    }

    const mapStateToProps = state => {
      return {
        peoples: state.peoples.peoples,
        error: state.peoples.error
      };
    };

    export default connect(mapStateToProps)(Main);

If i iterate the props multi objects array i can face Map is not define issue;

I need to iterate the props.data multi objects array in child component and i get object from Redux store. once component loaded the redux store. can you please some one help me on this. you can find whole code below mentioned

Answer 1

Try this It works in your codesandbox.

{peoples.results && <PeopleName data={peoples.results} />}