Access useEffect in Parent from Child Component - reactjs

Question

I'm using react and trying to figure out how to trigger useEffect (on parent) from a child component.
I have a child component that contains a modal with input fields that are passed to my DB.
import React, { useState } from 'react';
import { Modal, Button, Form } from 'react-bootstrap';
const AddContact = () => {
// Modal Setup
const [ showModal, setShowModal ] = useState(false);
const handleClose = () => setShowModal(false);
const handleShow = () => setShowModal(true);
// Using state to hold the values for each field in the form
const [first, setFirst] = useState('');
const [last, setLast] = useState('');
const handleSubmit = (e) => {
e.preventDefault(); // prevents form default action
const addContact = async () => {
const result = await fetch('/api/crm/add', {
method: 'POST',
body: JSON.stringify({ first_name: first, last_name: last }),
headers: {
'Content-Type': 'application/json',
}
});
const body = await result.json();
}
addContact();
handleClose();
};
return (
<>
<Button onClick={handleShow} variant="primary" size="sm">Add Contact</Button>
<Modal show={showModal} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Contact</Modal.Title>
</Modal.Header>
<Modal.Body>
<label for="formfirst">First Name: </label><br />
<input
id="formfirst"
name="formfirst"
type="text"
value={first}
onChange={e => setFirst(e.target.value)}
/>
<br/>
<label for="formlast">Last Name: </label><br />
<input
id="last"
name="last"
type="text"
value={last}
onChange={e => setLast(e.target.value)}
/> <br/>
<Form.Group>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>Cancel</Button>
<Button variant="primary" onClick={handleSubmit}>Submit</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default AddContact;
The parent component has a table of data which I would like to refresh so that it shows the current data:
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Table } from 'react-bootstrap';
import AddContactForm from '../components/AddContactForm';
// React-Table
import {
useTable,
} from 'react-table'
const ContactsPage = () => {
const [ tableData, setTableData ] = useState([]);
useEffect( () => {
const fetchData = async () => {
const result = await fetch(`api/crm/get`);
const body = await result.json();
setTableData(body);
}
fetchData();
},[]);
const columns = React.useMemo(
() => [
{
Header: 'First Name',
accessor: 'first_name',
},
{
Header: 'Last Name',
accessor: 'last_name',
}
... SIMPLIFIED FOR CONCISENESS
],
[]
)
function ReactTable({ columns, data }) {
const {
getTableProps,
... REMOVED SOME REACT-TABLE FOR CONCISENESS
} = useTable({
columns,
data,
})
return (
<>
<h2>Contacts</h2>
<hr></hr>
<div>
<AddContactForm />
</div>
<Table striped bordered hover size="sm" {...getTableProps()}>
... REMOVED TABLE TO CONCISENESS
</Table>
</>
);
}
const data = React.useMemo(() => tableData)
return (
<Styles>
<ReactTable columns={columns} data={data} />
</Styles>
)
}
export default ContactsPage;
How can I achieve this? I tried making my useEffect hook into a function which I could pass to my child component, but I got an error saying that that new function was not a function???

Answer 1

Not sure it makes sense to pass useEffect as props, instead pass the function used inside useEffect as props. Here
useEffect( () => {
const fetchData = async () => {
const result = await fetch(`api/crm/get`);
const body = await result.json();
setTableData(body);
}
fetchData();
},[]);
Refactor it like this;
// Wrapped in useCallback otherwise it would be recreated each time
// this component rerenders, hence triggering useEffect below
let fetchData = React.useCallback(async () => {
const result = await fetch(`api/crm/get`);
const body = await result.json();
setTableData(body);
},[])
useEffect(() => {
fetchData();
},[fetchData]);
and pass fetchData as props to the modal which you can invoke after submit.