Immediate rendering of a reactJS dynamic component is not working after deleting an item from the component

Question

I am building a full stack automobile inventory website using react js, express js and mongodb. I have loaded all data from database in tabular form in the client side. Now I am trying to implement a feature to delete a row of information from the table using delete method. I was able to delete it successfully from database but in client side, it needs reload to remove it from there. I want it to be removed immediately after clicking delete button. I have explored stackoverflow and tried available solutions. but it didn't work in my case. I dont know were is the problem. I am stuck in it. Here is my client side code:

Code for client side and server side-

//Code for parent component

const ManageInventory = () => {
    const [items, setItems] = useAutos([]);//custom hook to load inventory items
    const navigate = useNavigate();

    const column = [
        {heading: 'Category', value: 'category'},
        {heading: 'Model', value: 'modelName'},
        {heading: 'Features', value: 'description'},
        {heading: 'Price', value: 'price'},
        {heading: 'Supplier', value: 'supplier'},
        {heading: 'Stock', value: 'quantity'},
    ]
    
    return (
        <>
        <div>
            <h1 className='text-3xl text-center text-bold mt-4'>Name of Warehouse Inventory</h1>
            <Table data={items} column={column}/>
        </div>
        <div className='flex justify-center'>
            <button onClick={() => navigate('/addinventory')} className='my-24 px-4 py-1 bg-red-200 border border-red-300 rounded-full text-sm font-semibold hover:bg-red-500 hover:text-white hover:border-transparent focus:outline-none'>Add New Items</button>
        </div>
        </>
    );
};

Code for child component- Table
const Table = ({ data, column }) => {
    return (
        <>
        <table>
            <thead>
                <tr>
                    {
                        column.map((item) => <TableHeadItem key={item._id} item={item} />)
                    }
                </tr>
            </thead>
            <tbody>
                {
                    data.map((item) => <TableRow key={item._id} item={item} column={column} />)
                }
            </tbody>
        </table>
        </>
    );

};

const TableHeadItem = ({ item }) => <th>{item.heading}</th>

export default Table;

//Code for child component- Table row with data where delete method implemented

const TableRow = ({ item, column }) => {

     const [items, setItems] = useState([]);
     useEffect(() => {
         fetch('server link')
             .then(res => res.json())
             .then(data => setItems(data))
     }, []);
    
     //Remove item
    const handleRemove = id => {
        const isProceed = window.confirm('Are you sure you want to remove item');
        if(isProceed) {
            const url = `server link/${id}`
            fetch(url, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(data => {
                if(data.deletedCount > 0){
                    const rests = items.filter(item => item._id !== id);
                    setItems(rests);
                }
            })
        }
    }
    return (
        <>
        <tr>
            {
                column.map(columnItem => {
                    return <td>{item[`${columnItem.value}`]}</td>
                })
            }
             <td>
                 <button onClick={() => handleRemove(item._id)} className="ml-3 inline-flex text-white bg-red-500 border-0 py-1 px-6 focus:outline-none hover:bg-red-600 rounded text-lg">Remove Item</button>
             </td>
        </tr>
        </>
    );
};

export default TableRow;

//Server side code- Delete API
        app.delete('/auto/:id', async (req, res) => {
            const id = req.params.id;
            const query = {_id: ObjectId(id)};
            const result = await autosCollection.deleteOne(query);
            res.send(result)
        });

Answer 1

useEffect is the perfect function to do what you're looking to do. Pass items to the dependency array in useEffect and it should re-render your component when items is updated through your fetch request. It should look like so:

     useEffect(() => {
         fetch('server link')
             .then(res => res.json())
             .then(data => setItems(data))
     }, [items]);