0
0 Comments

I have 4 components: 

App, CatalogList, CatalogPreview, CatalogDetail

App
is the parent component and I have these state values:

const [catalog, setCatalog] = useState({ id: 1, name: 'Electronics' })
const [isModalOpen, setIsModalOpen] = useState(false)


CatalogList
and 
CatalogPreview
components receive the above state values as props along with their setter functions.

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
modal. Inside the modal, there’s an ‘Explore’ button.

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
}

Link to Code Sandbox

Questions:

  1. Is this the correct way?
  2. In the 
    CatalogDetail
    component, if I click a Delete button and make a delete API request,
    how do I navigate back to the 
    CatalogList
    route AFTER the call is completed.
john Asked question May 13, 2021