TypeError: Cannot read properties of undefined (reading 'name')

Question

I am trying to use bootstrap modal to display each item on a table when clicked on the view button. I initially did it in a single file and it's but now I tried to separate the modal from the list of items both which means I have two files for them now and I am getting this error: TypeError: Cannot read properties of undefined (reading 'name')

Below is my code: ModalPractice.js

import React, {useState} from 'react';
import { Table } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DetailModal } from './DetailModal';

const ModalPractice = () => {
  const [show, setShow] = useState(false);

  const [selectedItem, setSelectedItem] = useState({});

  const handleClose = () => {
    setShow(false);
    setSelectedItem({});
  };

  const handleShow = (e, item) => {
    setShow(true);
    setSelectedItem(item);
  };

  const food = [
    {
      id: 1,
      name: 'rice',
      category: 'grain',
      image: 'images/rice.jpg',
    },
    {
      id: 2,
      name: 'beans',
      category: 'grain and protein',
      image: 'images/beans.jpg',
    },
    {
      id: 3,
      name: 'amala',
      category: 'swallow',
      image: 'images/amala.jpg',
    },
    {
      id: 4,
      name: 'Oat',
      category: 'cereals',
      image: 'images/oat.jpg',
    },
    {
      id: 5,
      name: 'coke',
      category: 'soft drink',
      image: 'images/coke.jpg',
    },
    {
      id: 6,
      name: 'banana',
      category: 'fruit',
      image: 'images/banana.jpg',
    },
    {
      id: 7,
      name: 'okra',
      category: 'vegetable',
      image: 'images/okra.jpg',
    },
    {
      id: 8,
      name: 'yam',
      category: 'tuber',
      image: 'images/yam.jpg',
    },
    {
      id: 9,
      name: 'palm oil',
      category: 'fat',
      image: 'images/palmoil.jpg',
    },
    {
      id: 10,
      name: 'orange',
      category: 'fruit',
      image: 'images/orange.jpg',
    },
  ];

  return (
    <div>
      {/* <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{selectedItem.name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{selectedItem.category}</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary' onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal> */}

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Food Name</th>
            <th>Food Category</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          {food.map((list) => (
            <tr className='align-middle' key={list.id}>
              <td>{list.id}</td>
              <td>{list.name}</td>
              <td>{list.category}</td>
              <td>
                <img alt='' src={list.image} width='100' height='100' />
              </td>
              <td>
                <DetailModal
                  id={list.id}
                  name={list.name}
                  category={list.category}
                  handleShow={handleShow}
                  handleClose={handleClose}
                  show={show}
                  selectedItem={selectedItem}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default ModalPractice;

DetailModal.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Modal } from 'react-bootstrap';

export const DetailModal = (props) => {
  const {selectedItem, show, handleClose, handleShow, list} = props
  return (
    <div>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{selectedItem.name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{selectedItem.category}</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary' onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      <Button variant='primary' onClick={(e) => handleShow(e, list)}>
        Detail
      </Button>
      {console.log(props)}
    </div>
  );
};

Answer 1

Its showing undefined because you have not passed a list prop to the DetailModal

its should be like this

ModalPractice.js

import React, {useState} from 'react';
import { Table } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DetailModal } from './DetailModal';

const ModalPractice = () => {
  const [show, setShow] = useState(false);

  const [selectedItem, setSelectedItem] = useState({});

  const handleClose = () => {
    setShow(false);
    setSelectedItem({});
  };

  const handleShow = (e, item) => {
    setShow(true);
    setSelectedItem(item);
  };

  const food = [
    {
      id: 1,
      name: 'rice',
      category: 'grain',
      image: 'images/rice.jpg',
    },
    {
      id: 2,
      name: 'beans',
      category: 'grain and protein',
      image: 'images/beans.jpg',
    },
    {
      id: 3,
      name: 'amala',
      category: 'swallow',
      image: 'images/amala.jpg',
    },
    {
      id: 4,
      name: 'Oat',
      category: 'cereals',
      image: 'images/oat.jpg',
    },
    {
      id: 5,
      name: 'coke',
      category: 'soft drink',
      image: 'images/coke.jpg',
    },
    {
      id: 6,
      name: 'banana',
      category: 'fruit',
      image: 'images/banana.jpg',
    },
    {
      id: 7,
      name: 'okra',
      category: 'vegetable',
      image: 'images/okra.jpg',
    },
    {
      id: 8,
      name: 'yam',
      category: 'tuber',
      image: 'images/yam.jpg',
    },
    {
      id: 9,
      name: 'palm oil',
      category: 'fat',
      image: 'images/palmoil.jpg',
    },
    {
      id: 10,
      name: 'orange',
      category: 'fruit',
      image: 'images/orange.jpg',
    },
  ];

  return (
    <div>
      {/* <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{selectedItem.name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{selectedItem.category}</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary' onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal> */}

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Food Name</th>
            <th>Food Category</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          {food.map((list) => (
            <tr className='align-middle' key={list.id}>
              <td>{list.id}</td>
              <td>{list.name}</td>
              <td>{list.category}</td>
              <td>
                <img alt='' src={list.image} width='100' height='100' />
              </td>
              <td>
                <DetailModal
                  id={list.id}
                  name={list.name}
                  category={list.category}
                  handleShow={handleShow}
                  handleClose={handleClose}
                  show={show}
                  list={list}
                  selectedItem={selectedItem}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default ModalPractice;