Unable to remove speific card component in a loop

Question

    const MealBox = ({ mealTime, setShowBox }: { mealTime: string; setShowBox: any }) => {
    const [meal, setMeal] = useState("Jollof rice")
    
    // console.log('meal', meal)
    
    return (
        <Box border={'1px solid #f0eeeb'} rounded={'lg'} p="10px">
            <Flex
                alignItems={'center'}
                gap={'25px'}
                w={'270px'}
                justifyContent={'space-between'}
            >
                <Box w='full'>
                    <Flex justify={'space-between'}>
                        <Text fontWeight={'semibold'}>{mealTime}</Text>
                        <MdOutlineRefresh size={24} />
                    </Flex>
                    <Select onChange={(e) => setMeal(e.target.value)} value={meal}>
                        <option value="Jollof rice">Jollof Rice</option>
                        <option value="Spaghetti">Spaghet

ti</option>
                </Select>
            </Box>
        </Flex>

        <Box bg={'#f8f8f7'} p="10px" mt="15px" rounded={'lg'}>
            <Flex alignItems={'center'} justifyContent={'space-between'}>
                <Text fontWeight={'semibold'}>{meal}</Text>
                <Box onClick={() => setShowBox(false)} cursor={'pointer'}>
                    <LiaTimesSolid />
                </Box>
            </Flex>
            <Text>Chicken Republic - Gbagada</Text>
            <Text fontWeight={'medium'}>NGN 2,500</Text>
            <Flex alignItems={'center'} gap={'15px'} mt={'10px'}>
                <Text>Sides:</Text>
                <Select>
                    <option value="Youghurt">Youghurt</option>
                    <option value="Orange juice">Orange juice</option>
                </Select>
            </Flex>
            <Flex alignItems={'center'} gap={'15px'} mt={'10px'}>
                <Text>Extras:</Text>
                <Select>
                    <option value="Youghurt">Plantain</option>
                    <option value="Orange juice">Coleslaw</option>
                </Select>
            </Flex>
        </Box>
    </Box>
);

The code above is a card component that has a cancel icon which is meant to remove the card when clicked on.

    const [showBreakfastBox, setShowBreakfastBox] = useState(true);
const [showLunchBox, setShowLunchBox] = useState(true);
const [showDinnerBox, setShowDinnerBox] = useState(true);

These usestate variables are used to render conditionally whether the mealbox component is shown or addfood component is shown -

{Array(7)
            .fill(0)
            .map((item, idx) => {


                const tomorrow = new Date(currentDate)
                tomorrow.setDate(currentDate.getDate() + idx + 1);

                const formattedDate = tomorrow.toLocaleDateString('en-US', { month: 'long', day: 'numeric' });

                const dayOfWeek = tomorrow.toLocaleDateString('en-US', { weekday: 'long' })

                return (
                    <Box
                        key={idx}
                        overflowX={'scroll'}
                        sx={{
                            '::-webkit-scrollbar': {
                                display: 'none',
                            },
                        }}
                        maxW={'1420px'}
                        w={'1420px'}
                        my={'25px'}
                        mx="auto"
                    >
                        <Flex gap={'15px'} width={(10 * 270).toString() + 'px'}>
                            <Box w={'170px'}>
                                <Text>{formattedDate}</Text>
                                <Text fontWeight={'semibold'}>{dayOfWeek}</Text>
                                <Text fontSize={'.875rem'} color='#AA9F93'>1669 Calories</Text>
                                <Box mt='10px'>
                                    <MdOutlineRefresh size={24} />
                                </Box>
                            </Box>

                            {
                                showBreakfastBox
                                    ? <MealBox mealTime={'Breakfast'} setShowBox={setShowBreakfastBox} />
                                    : <AddFood mealTime={'Breakfast'} setShowBox={setShowBreakfastBox} />
                            }
                            {
                                showLunchBox
                                    ? <MealBox mealTime={'Lunch'} setShowBox={setShowLunchBox} />
                                    : <AddFood mealTime={'Lunch'} setShowBox={setShowLunchBox} />
                            }
                            {
                                showDinnerBox
                                    ? <MealBox mealTime={'Dinner'} setShowBox={setShowDinnerBox} />
                                    : <AddFood mealTime={'Dinner'} setShowBox={setShowDinnerBox} />
                            }
                            
                            <SnackBox />
                        </Flex>
                    </Box>
                );
            })}

And in this code I am rendering the mealbox component on the screen and using those usestate variables declared earlier to conditionally render it with addfood component but the issue I am facing now is because of this loop whenever I click the cancel button, all the 7 card component leaves the screen and the goal is to make just one component leave the screen. I would appreciate every form of help I can get to solve this issue.

Answer 1

I have figured it out. So I figured I shouldn't remove the mealbox card inside the loop so I created a new component and did the conditional rendering in the component plus the card removal too in the component and I rendered the new component inside the loop.

    const CheckLoop = ({mealTime}: {mealTime: string}) => {
    const [showInitialBox, setShowInitialBox] = useState(true);
    
    return (
        showInitialBox
            ? <MealBox mealTime={mealTime} setShowBox={setShowInitialBox} />
            : <AddFood mealTime={mealTime} setShowBox={setShowInitialBox} />
    )
}

I did some thing like this and put Checkloop component inside the array.map