React framework. Object destructuring is not working

Question

I have a homepage where 3 cards are shown. When a specific card is clicked then the image will show. Now I can change the route but I am not able to show image and heading. Because all it is saying is destructuring undefined. The console log is showing the JSON data though.

Here is parent component:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import DetailsOfDestination from "../DetailsOfDestination/DetailsOfDestination";
import FakeData from "../Fakedata/FakeData";

const PlaceDetail = (props) => {
  const [info, setInfo] = useState(FakeData);
  const { heading, img, text } = props.place;
  return (
    <div>
      {info.map((singleInfo) => (
        <DetailsOfDestination singleInfo={singleInfo}></DetailsOfDestination>
      ))}
      <Link to={`/DetailsOfDestination`}>
        <img src={img} alt="" />
      </Link>
    </div>
  );
};

export default PlaceDetail;

Here is child component:

import React from "react";

const DetailsOfDestination = (props) => {
  console.log(props.singleInfo);
  const { heading, img } = props.singleInfo;
  //console.log(heading);
  return (
    <div>
      <h1>{heading}</h1>
    </div>
  );
};

export default DetailsOfDestination;

My Fake Data:

const data = [
  {
    img: "https://i.ibb.co/pxgYz0b/Group-1333.png",
    heading: "Cox Bazar",
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,",
  },
  {
    img: "https://i.ibb.co/3dLyGVd/Group-1335.png",
    heading: "Sreemangal",
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,",
  },
  {
    img: "https://i.ibb.co/qkHmMFD/Group-1337.png",
    heading: "Sundarban",
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,",
  },
];

export default data;

I'm getting an error. It says:

"Cannot destructure property heading of props.singleInfo as it is undefined"

Answer 1

Without seeing the data - its hard to tell, but my guess is that heading and img are properties of hte singleInfo object that is passed through props.

If you do not destructure the parent object - you will not have access to its children - so singleInfo is the variable and heading and img are properties of that object - so you need to alter the syntax of hte destructure a little bit.

What this will do is both - give access to the singleInfo destructured object - but will also alias its children as indicated.

const { singleInfo , singleInfo: { heading , img} } = props;

Answer 2

You can use destructuring if you are sure that heading exists in FakeData or you can use like this

<div>
 { props.singleInfo.heading ? (<h1>{props.singleInfo.heading}</h1>) : null }
</div>

PS: I noticed destructuring needs to be modified.

const {heading, img } = {...props.singleInfo}

Please refer the demo: Demo