React - "TypeError: Cannot read property 'image' of undefined" while styling with CSS

Question

I am new to web development and React, and I would kindly ask for some help related to my current project.

I am accessing data from a local file and trying to display them on click. It works fine if I don't touch anything related to styling, but every time I add some CSS my code breaks.

I guess ny question is similar to the one asked here , but this solution doesn't work for me. I am not even able to add a div tag? Can anybody suggest what to do? Thanks!

import { withRouter } from "react-router-dom";
import "../womenInfo.css";

function WomanDetails({ routeProps, data }) {
 const foundCard = () => {
    return data.find((card) => card.id === +routeProps.match.params.id);
};
return (
    <div className="woman-page">
        <>
            <img className="info-img" src={foundCard().image} alt="" />
        </>
        <>
            <h3 className="women-title">{foundCard().title}</h3>
        </>
        <>
            <p className="women-years">{foundCard().years}</p>
        </>
        <>
            <p className="women-nationality">{foundCard().nationality}</p>
        </>
        <>
            <p className="women-contribution">{foundCard().contribution}</p>
        </>
    </div>
 );
}

export default withRouter(WomanDetails);

Answer 1

Issue

Array.prototype.find can potentially return undefined if no element in the array matches.

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

If foundCard() returns undefined then foundCard().image will throw the TypeError: Cannot read property 'image' of undefined” error you are seeing.

Solution

Simplify foundCard from function to an assignment expression. Check the foundCard value and if falsey (undefined, null, false) then return null early to indicate there is nothing to render.

The React Fragment s are also only necessary when returning more than a single node and you don't want to muddy up the DOM with div "containers". They don't need to surround each single element.

function WomanDetails({ routeProps, data }) {
  const foundCard = data.find((card) => card.id === +routeProps.match.params.id);

  if (!foundCard) return null;

  return (
    <div className="woman-page">
      <img className="info-img" src={foundCard.image} alt="" />
      <h3 className="women-title">{foundCard.title}</h3>
      <p className="women-years">{foundCard.years}</p>
      <p className="women-nationality">{foundCard.nationality}</p>
      <p className="women-contribution">{foundCard.contribution}</p>
    </div>
  );
}

export default withRouter(WomanDetails);