أقوم بإنشاء جدول في React يحتوي على عدة صفوف، ولكل صف، سيكون هناك مكون React يسمى AutoShopPricesExpanded يحتوي على مزيد من التفاصيل حول أسعار ذلك الصف، عندما أنقر على صف واحد، أريد أن يتم عرض مكون واحد فقط أسفل ذلك الصف.
حاليًا، يقوم الكود بعرض جميع المكونات لكل صف عندما ينقر المستخدم على زر 'تبديل العرض'.
سؤالي هو: كيف يمكنني عرض مكون واحد فقط للصف ذي الصلة.
الكود أدناه هو ما لدي حاليًا:
import { Box, Text, Table, Tbody, Td, Th, Thead, Tr} from '@chakra-ui/react';
import {AutoShopPriceExpand} from './autoShopPriceExpand';
import { useState } from 'react';
export const AutoShopPricesList = ({filteredAutoShopPricesLists}:{filteredAutoShopPricesLists: any}) => {
const [isOpen, setIsOpen] = useState(false);
function toggle() {
setIsOpen((isOpen) => !isOpen);
}
return (
<Box py={1}>
<Table variant='striped'>
<Thead>
<Tr>
<Th>Vehicle</Th>
<Th>Service</Th>
<Th isNumeric>Price</Th>
</Tr>
</Thead>
<Tbody>
{filteredAutoShopPricesLists.map((autoshop: any)=>{
return(
<>
<button onClick={toggle}>Toggle show</button>
<Tr key = "lol">
<Td>{autoshop.car_year} {autoshop.car_make} {autoshop.car_model} <br/> <Text color='gray' fontSize='sm'> {autoshop.car_trim} </Text></Td>
<Td>{autoshop.service} <br/> <Text color='gray' fontSize='sm'>{autoshop.date_of_quote} </Text> </Td>
<Td isNumeric> ${autoshop.service_price} <br/> <Text color='gray' fontSize='sm'>{autoshop.source_of_price} </Text></Td>
</Tr>
{isOpen && <AutoShopPriceExpand details = {autoshop}/>}
</>
);
})}
</Tbody>
</Table>
</Box>
);
};