import React,{useEffect,useState} from "react"
    import axios from "axios"
    import './App.css';
    import Move from "./Move";
    
    
    function App() {
      const [data,setData] = useState([]);
      useEffect(()=> {
       axios.get("https://api.themoviedb.org/3/movie/popular?api_key={apikey}&language=en-US&page=1").then((res)=> {
        setData(res.data.results)
       
       
       })
      },[])
    
      return (
       <div>
        
        <div className="App">
    <input placeholder="enter something" />
    <label></label>
        </div>
        {
        data.map(function(movie){
          console.log(movie)
        const title = movie.title
        const id = movie.id
         
        return <Move key={id} title={title}  />
    })}
        </div>
      );
    
    
    
    
      }
    
    
    
    
    
    export default App;
Component Im Trying To Render
import React from 'react'

const Move = (title) => {
  return (
      <div>
    <div>Move</div>
    <h1>{title}</h1>

</div>
  )
}

export default Move

im trying get access properties of the object for example title but im getting the error “Objects are not valid as a React child”

the object is :

{
    "adult": false,
    "backdrop_path": "/iQFcwSGbZXMkeyKrxbPnwnRo5fl.jpg",
    "genre_ids": [
        28,
        12,
        878
    ],
    "id": 634649,
    "original_language": "en",
    "original_title": "Spider-Man: No Way Home",
    "overview": "Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man.",
    "popularity": 8450.164,
    "poster_path": "/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg",
    "release_date": "2021-12-15",
    "title": "Spider-Man: No Way Home",
    "video": false,
    "vote_average": 8.4,
    "vote_count": 8021
}

not sure what the problem is

CodePudding user response：

const Move = (title) => {
  return (
    <div>
      <div>Move</div>
      <h1>{title}</h1>
    </div>
  );
};

In this code, title is the entire props object. You need to access just the title property on that object:

const Move = (props) => {
  return (
    <div>
      <div>Move</div>
      <h1>{props.title}</h1>
    </div>
  );
};

Or with destructuring:

const Move = ({ title }) => {
  return (
    <div>
      <div>Move</div>
      <h1>{title}</h1>
    </div>
  );
};

CodePudding user response：

import React from 'react'

const Move = (prop) => {
  return (
      <div>
    <div>Move</div>
    <h1>{prop.title}</h1>

</div>
  )
}