title: TypeError: Cannot read properties of undefined (reading 'name')
body: <p>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: <em><strong>TypeError: Cannot read properties of undefined (reading 'name')</strong></em></p>
  <p>Below is my code:
  <strong>ModalPractice.js</strong></p>
  <pre><code>import React, {useState} from 'react';
  import { Table } from 'react-bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { DetailModal } from './DetailModal';
  
  const ModalPractice = () =&gt; {
    const [show, setShow] = useState(false);
  
    const [selectedItem, setSelectedItem] = useState({});
  
    const handleClose = () =&gt; {
      setShow(false);
      setSelectedItem({});
    };
  
    const handleShow = (e, item) =&gt; {
      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 (
      &lt;div&gt;
        {/* &lt;Modal show={show} onHide={handleClose}&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;{selectedItem.name}&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;{selectedItem.category}&lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant='secondary' onClick={handleClose}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant='primary' onClick={handleClose}&gt;
              Save Changes
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt; */}
  
        &lt;Table striped bordered hover&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Food Name&lt;/th&gt;
              &lt;th&gt;Food Category&lt;/th&gt;
              &lt;th&gt;Image&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {food.map((list) =&gt; (
              &lt;tr className='align-middle' key={list.id}&gt;
                &lt;td&gt;{list.id}&lt;/td&gt;
                &lt;td&gt;{list.name}&lt;/td&gt;
                &lt;td&gt;{list.category}&lt;/td&gt;
                &lt;td&gt;
                  &lt;img alt='' src={list.image} width='100' height='100' /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;DetailModal
                    id={list.id}
                    name={list.name}
                    category={list.category}
                    handleShow={handleShow}
                    handleClose={handleClose}
                    show={show}
                    selectedItem={selectedItem}
                  /&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
    );
  };
  
  export default ModalPractice;
  
  </code></pre>
  <p><strong>DetailModal.js</strong></p>
  <pre><code>import React from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { Button, Modal } from 'react-bootstrap';
  
  export const DetailModal = (props) =&gt; {
    const {selectedItem, show, handleClose, handleShow, list} = props
    return (
      &lt;div&gt;
        &lt;Modal show={show} onHide={handleClose}&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;{selectedItem.name}&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;{selectedItem.category}&lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant='secondary' onClick={handleClose}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant='primary' onClick={handleClose}&gt;
              Save Changes
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
        &lt;Button variant='primary' onClick={(e) =&gt; handleShow(e, list)}&gt;
          Detail
        &lt;/Button&gt;
        {console.log(props)}
      &lt;/div&gt;
    );
  };
  
  </code></pre>