I have 4 components:
App, CatalogList, CatalogPreview, CatalogDetail
App
const [catalog, setCatalog] = useState({ id: 1, name: 'Electronics' }) const [isModalOpen, setIsModalOpen] = useState(false)
CatalogList
CatalogPreview
Inside
CatalogList.js
I have a list of catalog links (electronics, furniture, …) that when you click on one of them,
it opens up the
CatalogPreview
When you click the ‘Explore’ button, it needs to do 4 things:
set the selected catalog in state (in App.js)
save selected catalog in localStorage
navigate to the detail page
close the modal window
I attempted the following in the ‘Explore’ button’s click handler (Inside the modal):
function explore() { props.setCatalog({...}) props.setIsModalOpen(false) window.localStorage.setItem('catalog', JSON.stringify({...}) history.push('detail-route') // this brings up the CatalogDetail }
Questions:
- Is this the correct way?
- In the
component, if I click a Delete button and make a delete API request,
CatalogDetail
how do I navigate back to theroute AFTER the call is completed.CatalogList
john Asked question May 13, 2021
Recent Comments