How to correctly pass a function that sends a request to the button of a child component?

Question

JavaScript

Good day to all!

Please tell me, I have a component (let's say - Parent), in which I render the card component using the map method. In the parent, I have a "deleteCard" function that sends a request to the server. How to properly pass this function to the button of each card?

Parent

const Test = () => {
    const [test, setTest] = useState([])

    const deleteCard = async (id) => {
        try {
            await deletedCard(id)
        } catch (e) {
            console.log('test')
        }
    }
    
    return (
        <div>
            <Box sx={{ flexWrap: 'wrap', display: "flex", p: 1, m: 1 }}>
                {
                    test.map(tes =>
                        <CardItem key={tes._id}
                                  user={tes.user}
                                  airdropName={tes.name}
                                  link={tes.link}
                                  notes={tes.notes}
                                  date={tes.date}
                        />
                    )
                }
            </Box>
        </div>
    );
};

export default Test;

And here is the element of the card component where the button is drawn, I would like that when the button is pressed, a request is sent to the server with the passed card ID:

Card

<Typography variant="body2" color="text.secondary" component="span">
                        <div className={classes.bottom}>
                            <a href={props.link} target="_blank">
                                <IconButton color="primary" aria-label="link ref" component="span">
                                    <PaidIcon />
                                </IconButton>
                            </a>
                            <IconButton color="error" aria-label="delete card" component="span"
                                                onClick={???}>
                                <DeleteOutlineIcon />
                            </IconButton>
                        </div>
</Typography>

I tried to simplify the components as much as possible, but so that the essence of the issue remains clear. A trash can icon is drawn on the card component (delete button).

Thanks in advance!)

Answer 1

You can read faq-functions in the dock