How to preserve state value using context

Question

I am createing a modal with 3steos, I want to use 1st step states in 2nd steps, but when I move to 2nd step all the state initialised to its initial state. I am new to use react context and call backs. Below is the code

const AuditModalContextProvider = ({children}) => {
  const [modalState, setModalState] = useState({
    isOpen: false,
    modalType: 'New',
    modalFor: 'Audit',
    id: '',
    name: '',
    method: '',
    activeCreateForm: 0,
})

const openModal = useCallback(
    () =>
      setModalState({
        ...modalState,
        isOpen: true,
      }),
    [modalState]
  )

 const handleChangeCreateForm = useCallback(step => {
    if (step === 0) {
      handleIncreaseDecreaseStep(0, [])
    } else if (step === 1) {
      handleIncreaseDecreaseStep(1, [])
    } else if (step === 2) {
      handleIncreaseDecreaseStep(2, [])
    } else if (step === 3) {
      handleIncreaseDecreaseStep(3, [])
    }
  }, [])

  const handleStatusforPreviousNextButton = useCallback(
    val => {
      setModalState({
        ...modalState,
        isOpen: true,
        formState: false,
      })

      handleChangeCreateForm(
        modalState.activeCreateForm >= 0 && modalState.activeCreateForm < 4
          ? modalState.activeCreateForm + val
          : 0
      )
    },
    [setModalState, handleChangeCreateForm, modalState]
  )

const value = {
    ...modalState,
    openModal,
    closeModal,
    handleStatusforPreviousNextButton,
    handleChangeCreateForm
}
return <AuditModalContext.Provider value={value}>{children}</AuditModalContext.Provider>
}

const AuditModalContextConsumer = AuditModalContext.Consumer

export {AuditModalContext, AuditModalContextProvider, AuditModalContextConsumer}

HOw to preserve states using context

Answer 1

You want to use context like redux. In context file :

import React,{createContext, useReducer} from 'react'

const initialState = {
    isOpen: false,
    modalType: 'New',
    modalFor: 'Audit',
    id: '',
    name: '',
    method: '',
    activeCreateForm: 0,
}

export const modalContext = createContext(initialState)
//Set here your state when you dispatch an action

const reducer = (state, action) => {
  switch(action.type) {
    case 'OPEN_MODAL':
      return {...state, isOpen: true}
    default:
      return state
  }
}

const AuditModalContextProvider = ({children}) => {
  const value = useReducer(reducer, initialState)
  return <modalContext.Provider value={value}>{children}</modalContext.Provider>
}

export default AuditModalContextProvider

In index.js wrap you app by the contextProvider

...
import AuditModalContextProvider from 'your context file's path'

const root = (
  <AuditModalContextProvider>
   <App />
</AuditModalContextProvider>
)

ReactDOM.render(root, document.getElementById('root'))

In you modal file use your context to get current state and to dispatch an action

import React, {useContext} from 'react'
import {modalContext} from 'your context file's path'

YourModal = props => {
    ...
    const [state, dispatch] = useContext(modalContext)
    ...
}

Use you state by writing : state.modalType for example Dispatch an action when you want to do something in reducer by writing : dispatch({type: 'tag for reducer', payload: 'your data to pass to reducer'})

For more info see this webiste : https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/