how to display Axios fetch data - reactjs

Question

Hi people Am new in react js, i have a problem in display data , in my application i fetched data but i couldn't be display in web page don't know where Am wrong please try to fix my error or tell me what should i do?
console data
https://ibb.co/1MfgDgW
Star.js
import Axios from 'axios';
import React, { useState, useEffect } from 'react';
import './Star.css';
import Planet from './Planet';
import People from './People';
const Star = () => {
const [search, setSearch] = useState('');
const [people, setPeople] = useState([]);
const [planet, setPlanet] = useState([]);
const onSubmit = (e) => {
e.preventDefault();
if (search === "") {
alert("please Enter some value");
}
}
useEffect(() => {
async function fetchPeople() {
const res = await Axios.get("https://swapi.dev/api/people/?format=json");
console.log(res.data.results);
setPeople(res.data.results);
}
async function fetchPlanet() {
const res = await Axios.get("https://swapi.dev/api/planets/?format=json");
console.log(res.data.results);
setPlanet(res.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)} />
<span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
</div>
<People people={people}/>
<Planet planet={planet}/>
</div>
</div>
)
}
export default Star;
People.js
import React from 'react';
const People = (props) => {
const { data } = props;
return (
<div className="row">
{data && data.map((people, i) => {
return (
<div className="col-md-3" key={i}>
<div className="card">
<div className="card-body">
<h4>{people.data.results[0].name}</h4>
</div>
</div>
</div>
)
})}
</div>
);
};
export default People;
Planet.js
import React from 'react';
const Planet = (props) => {
const { data } = props;
return (
<div className="row">
{data && data.map((planet, i) => {
return (
<div className="col-md-3" key={i}>
<div className="card">
<div className="card-body">
<h4>{planet.data.results[0].name}</h4>
</div>
</div>
</div>
)
})}
</div>
);
};
export default Planet;
App.js
This is the App.js file where i include my all components
import './App.css';
import Star from './Star';
import People from './People';
import Planet from './Planet';
function App(props) {
const { people, planet } = props;
return (
<div className="App">
<Star
people={people}
planet={planet}
/>
<People data={people} />
<Planet data={planet} />
</div>
);
}
export default App;

Answer 1

You pass people and planet as props, but using it as data prop:
<Planet planet={planet}/>
const Planet = (props) => {
// change to this, people too
const { planet } = props;
};

Answer 2

You're passing people and planet as props to App but you're performing the fetching in Star.js.
You might need to restructure your app so that data fetching is done by App and then pass down everything as props.
function App(props) {
const { people, planet } = props;
return (
<div className="App">
<Star people={people} planet={planet} />
<People data={people} />
<Planet data={planet} />
</div>
);
}