Type Error: Cannot read property 'map' of undefined in reactjs

user_14772642 0
Viewed 48

hi guys am getting an error like cannot read property , don't know where i am wrong please try to solve my error or tell me what should i do?

People.js

This is my people.js file where i want to show people information

import React from 'react'

const People = (props) => {

    const {people} = props;

    return (
        <div className='row'>
            {
                people.map((peple)=>{
                    <div className='col-md-3'>
                        <div className='card'>
                            <div className='card-body'>
                               <h4>{peple}</h4>
                            </div>
                        </div>
                    </div>
                })
            }
        </div>
    )
}

export default People;

Star.js I am trying to fetch this star people in my people component to show people data , anyone help how can i do it

import React, { useState, useEffect } from 'react';
import './Star.css';

const Star = () => {

    const [search, setSearch] = useState('');
    const [people, setPeople] = useState([]);
    const [planet, setPlanet] = useState([]);

    const onSubmit = (e) => {
        e.preventDefault();
    }

    useEffect(() => {
        async function fetchPeople() {
            let result = await fetch("https://swapi.dev/api/people/?format=json");
            let data = await result.json();
            setPeople(data.results);
        }

        async function fetchPlanet() {
            let result = await fetch("https://swapi.dev/api/planets/?format=json");
            let data = await result.json();
            setPlanet(data.results);
        }

        fetchPeople();
        fetchPlanet();
    }, [])

    // console.log("people", people);
    // console.log("planet", planet);

    return (
        <div>
            <div className='container'>
                <h2>Star War</h2>
                <div className='jumbotron'>
                    <input type="text"
                        className="form-control"
                        placeholder='Search...'
                        value={search}
                        onChange={(e) => setSearch(e.target.value)} />&nbsp;&nbsp;
                    <span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
                </div>
            </div>
        </div>
    )
}

export default Star;
jsx react-hooks reactjs
2 Answers

Just a simple check is fine for your case:

(people && people.length > 0) && people.map(...)

The reason is that people is undefined in first render due to the useEffect won't execute immediately.

user_53435110 
<People people={['Jon', 'Paul']} />

You aren't returning anything in people.map()

Change it to:

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => (
        <div className="col-md-3">
          <div className="card">
            <div className="card-body">
              <h4>{peple}</h4>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default People;

Note that I have removed a pair of curly braces.

Alternatively you could use the explicit return like this:

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => {
        return (
          <div className="col-md-3">
            <div className="card">
              <div className="card-body">
                <h4>{peple}</h4>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default People;
user_28042560
Related