Programmiererforum

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 (

{/* 

{selectedItem.name}

{selectedItem.category}


Close


Save Changes


 */}




#
Food Name
Food Category
Image



{food.map((list) => (

{list.id}
{list.name}
{list.category}

[img]{list.image} width=[/img]





))}



);
};

export default ModalPractice;

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 (



{selectedItem.name}

{selectedItem.category}


Close


Save Changes



 handleShow(e, list)}>
Detail

{console.log(props)}

);
};

Ich versuche, das Bootstrap-Modal zu verwenden, um jedes Element in einer Tabelle anzuzeigen, wenn auf die Schaltfläche „Ansicht“ geklickt wird.
Ich habe es zunächst in einer einzelnen Datei gemacht, aber jetzt habe ich versucht, das Modal von der Liste zu trennen Elemente beide, was bedeutet, dass ich jetzt zwei Dateien für sie habe und diese Fehlermeldung erhalte: [b]TypeError: Cannot read Properties of undefined (reading 'name')[/b]Unten ist mein Code:
[b]ModalPractice.js[/b]
[code]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 (

{/*

{selectedItem.name}

{selectedItem.category}


Close


Save Changes


*/}




#
Food Name
Food Category
Image



{food.map((list) => (

{list.id}
{list.name}
{list.category}

[img]{list.image} width=[/img]





))}



);
};

export default ModalPractice;

[/code]
[b]DetailModal.js[/b]
[code]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 (



{selectedItem.name}

{selectedItem.category}


Close


Save Changes



handleShow(e, list)}>
Detail

{console.log(props)}

);
};

[/code]