child hooks not rerendering after changing state in parent hooks

Below are parent component and child component, I just want to update child component once changing state in parent component.

I am creating one table which is child component and passing data from parent to child, and triggering delete function from child to parent. Data is getting deleted in parent but not sending same to child.

Any help is appreciable!!

Parent

import React, { useState } from "react";
import Pagination from "./components/Pagination.js";
import { Table } from "./components/Table.js";
import { useEffect } from "react";
import "./App.css";

function App() {

  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => setTableData(data))

  }, [])

  const deleteRowData = (id) => {
    tableData.map((row, ind) => {
      if (id === row.id) {

        console.log(id);
        tableData.splice(ind, 1);
        console.log(tableData);
        setTableData(tableData);
      }
    })

  }
  // console.log(tableData)
  return (
    <div className="App">
      <div className="container py-4">
        <Table tableData={tableData} deleteRowData={deleteRowData} />
      </div>
    </div>
  );
}

export default App;

Child

import react from "react";
import { useEffect } from "react";
export const Table = (props) => {
    console.log("table component");

    return (<div><table>
        <thead>
            <tr>
                <td>ID</td>
                <td>Title</td>
                <td>Edit</td>
                <td>Delete</td>
            </tr>
        </thead>
        <tbody>
            {props.tableData.map((row, ind) => {
                return (<tr key={row.id}>
                    <td>{row.id}</td>
                    <td>{row.title}</td>
                    <td>Edit</td>
                    <td onClick={() => props.deleteRowData(row.id)}>Delete</td>

                </tr>)
            })}
        </tbody>
    </table>

    </div>)

}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/yAMKqGJ