I don't get the expected value of a react props in child component

Question

I'm trying to manage some clients in a react js application (that I'm maintaining), it was first written in classes components but I'm now adding a functional child component and im not sure if this is the source of the problem or not (react-table examples only use functional component)

I have a main component that will do the data GET from a rest API and save it in state "entries" then I passe it to a child component as a props to render the data in a react-table, the problem is in this section as I have some buttons to edit and delete the data in react-modal, when I try access the props.entries after the buttons clicks I have an empty array of props.entries.

Here's the sandbox of the issue : https://codesandbox.io/s/stale-prop-one-forked-r6cevx?file=/src/App.js

I did a console.log when the delete button is clicked, and you can see that en entries array is empty.

Answer 1

You need to pass the showEditModal & showEditModal in useMemo dependency array. Since you dependency array is empty, when you click on edit or delete, it just points to the old function reference and it have the old entries value.

You can check the entries values by console.log.

Hope this solve your problem

    const showEditModal = useCallback(
        (client_id) => {
            const tmpClient = props.entries.filter(function (el) {
                return el._id === client_id;
            })[0];
            setClient(tmpClient);
            setEditModal(true);

            console.log('aaa', props);

            console.log(client_id);
            console.log(props.entries);
            console.log(tmpClient);
        },
        [props.entries]
    );

    const showDeleteModal = useCallback(
        (client_id) => {
            console.log('showDeleteModal entries : ', entries);
            const tmpClient = entries.filter(function (el) {
                return el._id === client_id;
            })[0];
            setClient(tmpClient);
            setDeleteModal(true);

            console.log('Delete', entries);
            console.log(client_id);
            console.log(tmpClient);
        },
        [props.entries]
    );

    const columns = React.useMemo(
        () => [
            {
                Header: 'fact',
                accessor: 'fact'
            },
            {
                Header: 'Actions',
                accessor: 'length',
                Cell: ({ cell }) => (
                    <>
                        {cell.row.values.length}
                        <Tooltip title='Supprimer' placement='top'>
                            <IconButton
                                variant='outlined'
                                id={cell.row.values._id}
                                onClick={() => showDeleteModal(cell.row.values.length)}
                            >
                                <DeleteIcon />
                            </IconButton>
                        </Tooltip>
                        <Tooltip title='Modifier' placement='top'>
                            <IconButton
                                variant='outlined'
                                id={cell.row.values.length}
                                onClick={() => showEditModal(cell.row.values.length)}
                            >
                                <EditIcon />
                            </IconButton>
                        </Tooltip>
                    </>
                )
            }
        ],
        [showEditModal, showDeleteModal]
    );