{getErrorMessage()}
: null; 36 | }; 37 | 38 | export default ErrorMessage; -------------------------------------------------------------------------------- /src/hooks/useQueryString.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback } from 'react'; 2 | 3 | // This custom hook keeps a state value in sync with a query parameter in the website's URL. 4 | // This allows the URL to be used to restore state on full-page reload or if the URL is shared/bookmarked. 5 | function useQueryString(key) { 6 | 7 | const [ paramValue, setParamValue ] = useState(getQueryParamValue(key)); 8 | 9 | // The useCallback hook is only called when one of its dependencies change. 10 | // In this case, we only want to update the browser URL if the query string needs to change. 11 | const onSetValue = useCallback( 12 | newValue => { 13 | setParamValue(newValue); 14 | updateQueryStringWithoutReload(newValue ? `${key}=${newValue}` : ''); 15 | }, 16 | [key, setParamValue] 17 | ); 18 | 19 | function getQueryParamValue(key) { 20 | return new URLSearchParams(window.location.search).get(key); 21 | } 22 | 23 | // update a query string without causing a browser reload 24 | function updateQueryStringWithoutReload(queryString) { 25 | const { protocol, host, pathname } = window.location; 26 | const newUrl = `${protocol}//${host}${pathname}?${queryString}`; 27 | window.history.pushState({ path: newUrl }, '', newUrl); 28 | } 29 | 30 | return [paramValue, onSetValue]; 31 | } 32 | 33 | export default useQueryString; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 20px; 3 | font-family: 'Sriracha', cursive; 4 | background: rgb(141, 185, 211); 5 | color: #003366; 6 | } 7 | 8 | a { 9 | color: #003366; 10 | } 11 | 12 | header { 13 | text-align: center; 14 | } 15 | 16 | footer { 17 | text-align: center; 18 | } 19 | 20 | h2 { 21 | margin-top: 5px; 22 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(Hi {user}!
20 |Add items to the list. When someone else adds an item it will instantly appear on the list.
21 |