Build a Node.js CRUD App Using React and FeathersJS
Inject the Context Provider into the Application Root
We need to encapsulate our root component with the Context Provider. Update src/index.js as follows:
...import { ContactContextProvider } from './context/contact-context';
ReactDOM.render( <ContactContextProvider> <BrowserRouter> <App /> </BrowserRouter> </ContactContextProvider>, document.getElementById('root'));Now all child components will be able to access the global state by using the useContext hook.
Display a List of Contacts
In this step, we'll create some static data to test with. Our initial state has an empty array of contacts. We'll use the dispatch method to temporarily populate the contacts array. Open pages/contact-list-page.js and update as follows:
import React, { useContext, useEffect } from 'react';import ContactList from '../components/contact-list';import { ContactContext } from '../context/contact-context';
const data = [ { _id: '1', name: { first: 'John', last: 'Doe', }, phone: '555', email: 'john@gmail.com', }, { _id: '2', name: { first: 'Bruce', last: 'Wayne', }, phone: '777', email: 'bruce.wayne@gmail.com', },];
const ContactListPage = () => { const [state, dispatch] = useContext(ContactContext);
useEffect(() => { dispatch({ type: 'FETCH_CONTACTS', payload: data, }); }, [dispatch]);
return ( <div> <h1>List of Contacts</h1> <ContactList contacts={state.contacts} /> </div> );};
export default ContactListPage;Next, we'll use a simple loop to display contacts in components/contact-list.js. Update as follows:
import React from 'react';
const ContactList = ({ contacts }) => { const list = () => { return contacts.map(contact => { return ( <li key={contact._id}> {contact.name.first} {contact.name.last} </li> ); }); };
return ( <div> <ul>{list()}</ul> </div> );}
export default ContactList;