TypeError: Cannot read property 'title' of undefined Reactjs

Question

I dont know why i have this error:! At first time i dont have any error and its work But when i refresh the page i have this error: TypeError: Cannot read property 'title' of undefined or TypeError: Cannot read property 'image' of undefined

import React, { useEffect , useState } from 'react';
import Content from './Content';
import NavBar from './NavBar';

    export default function BlogPost() {

    const [post, setPost] = useState([]);
    const [current, setCurrent] = useState(null)

    useEffect(() => {
       const cleanUp = fetch('http://localhost:3000/posts')
       .then( response => response.json())
       .then( post => 
           setPost(post),
           setCurrent(0)
       )
       return () => cleanUp;
    },[])

    function handleClick(index) {
        setCurrent(index)
    }
     

    return (
        <div className="wrapper d-flex align-items-stretch">
          <NavBar posts={post} handleClick={handleClick} />
          { null != current && <Content post={post[current]} />}
        </div>
    )
}

Content.jsx:

export default function Content({post}) {
    return (
       <div>
          <div id="content" className="p-4 p-md-5 pt-5">
        <img src={`/assets/${post.image}`} alt={post.title} />
     <h2 className="mb-4">{post.title}</h2>
     <p>{post.body}</p>
  </div>
       </div>
    )
}

Answer 1

The issue is here:

<h2 className="mb-4">{post.title}</h2>

here post object will get data from axios call and it will take some time to fetch the data that means on initial render title will not be there. So you have to put some check and access that key only when it is available.

Try something like:

<h2 className="mb-4">{post && post.title}</h2>

Or you can also try conditional rendering

Answer 2

you could do the below instead:

export default function Content({post}) {
    return post ? (
       <div>
         <div id="content" className="p-4 p-md-5 pt-5">
           <img src={`/assets/${post.image}`} alt={post.title} />
           <h2 className="mb-4">{post.title}</h2>
           <p>{post.body}</p>
         </div>
       </div>
    ) : null
}