How can I pass a component's method as a prop to a child component? [REACT]

Question

I have two components, a ListContact and a ListSupplier. The ListSupplier is child to ListContact. My contact component has a table with display results. The supplier component opens up a modal on the contact component, from which a selection is made to change the results of the table in the first component.

const ListContact = () => {
    const [contacts, setContacts] = useState([]);

... 
//Populate contact table function

    const getContact = async () => {
        try {
            
            const response = await fetch(`http://localhost:5000/contact/`);
            const jsonData = await response.json();

            setContacts(jsonData);


        } catch (err) {
            console.log(err.message);
        }
    }

//Populate contact table function with supplier id

    const getSupplierContacts = async (supplier_id) => {
        try {
            
            const response = await fetch(`http://localhost:5000/contact_supplier/${supplier_id}`);
            const jsonData = await response.json();

            setContacts(jsonData);


        } catch (err) {
            console.log(err.message);
        }
    }


    useEffect(() => {
        getContact();
    }, []);


return <Fragment>

        <ListSuppliers/>
        <table className="table mt-5">
            <thead>
                <tr>
                    <th>Contact Name</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {contacts.map(contact => (
                    <tr key={contact.contact_id}>
                        <td>{contact.contact_name}</td>
                        <td><EditContact contact={contact}/></td>
                        <td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td>
                    </tr>
                ))}
                
                  
            </tbody>
        </table>

    </Fragment>

In particular I want to use the getSupplierContact method from ListContact.

const ListSuppliers = () => {
    const [suppliers, setSuppliers] = useState([]);

...

useEffect(() => {
        getSuppliers();
    }, []);

return <Fragment>

<table className="table mt-5">
                            <thead>
                                <tr>
                                    <th>Supplier Name</th>
                                    <th>Choose Supplier</th>
                                </tr>
                            </thead>
                            <tbody>
                                {suppliers.map(supplier => (
                                    <tr key={supplier.supplier_id}>
                                        <td>{supplier.supplier_name}</td>
                                        <td><button className="btn btn-info" onClick={()=> getSupplierContacts(supplier.supplier_id)}>Choose Supplier</button></td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
</Fragment>

Any help much appreciated! Let me know if I can add any more info to the OP

//Attempt at solution

<button className="btn btn-info" onClick={()=> getSupplierContacts(supplier.supplier_id)}>Choose Supplier</button>

Answer 1

it is quite simple actually, you pass the props as an object on the call for listSuppliers

const ListContact = () => {
    const [contacts, setContacts] = useState([]);

... 
//Populate contact table function

    const getContact = async () => {
        try {
            
            const response = await fetch(`http://localhost:5000/contact/`);
            const jsonData = await response.json();

            setContacts(jsonData);


        } catch (err) {
            console.log(err.message);
        }
    }

//Populate contact table function with supplier id

    const getSupplierContacts = async (supplier_id) => {
        try {
            
            const response = await fetch(`http://localhost:5000/contact_supplier/${supplier_id}`);
            const jsonData = await response.json();

            setContacts(jsonData);


        } catch (err) {
            console.log(err.message);
        }
    }


    useEffect(() => {
        getContact();
    }, []);


return <Fragment>

        <ListSuppliers getSupplierContacts={getSupplierContacts}

 />
        <table className="table mt-5">
            <thead>
                <tr>
                    <th>Contact Name</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {contacts.map(contact => (
                    <tr key={contact.contact_id}>
                        <td>{contact.contact_name}</td>
                        <td><EditContact contact={contact}/></td>
                        <td><button className="btn btn-danger" onClick={()=> deleteContact(contact.contact_id)}>Delete</button></td>
                    </tr>
                ))}
                
                  
            </tbody>
        </table>

    </Fragment>

And then you use it in your listSuppliers comp.net like this

const ListSuppliers = ({getSupplierContacts }) => {
    const [suppliers, setSuppliers] = useState([]);
 //and you can call it now inside this component
 getSupplierContacts ()

...

useEffect(() => {
        getSuppliers();
    }, []);