CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
Dhyana Dave
Dhyana Dave

Reputation: 323

Reset state value in functional component in React native

I have created cart functionality and I have managed this using useState hook. though I can change quantity of items but if I close the Modal, it can't reset. (I want quantity 0 on closing a Modal).

let [addonData, setAddonData] = useState([]);

Here if i open modal again after closing I get previous values, but I want 0 instead of that. Please check attached image for your reference.

I have tried but I got this error: too many re-renders. react limits the number of renders to prevent an infinite loop.

So, If anyone have idea then please let me know.

Thanks in advance :) enter image description here

Upvotes: 1

Views: 414

Answers (1)

Bruno Frigeri
Bruno Frigeri

Reputation: 153

For doing that, you'll probably need to fire a reset function on modal dismiss, but what that means exactly?!

Parent Component

Imagine that we have this modal which receives a state from the parent component.

const MyParentComponent = () => {
  const [opened, setOpened] = useState(false);
  const [state, setState] = useState([])

  const onOpen = () => {
    setOpened(true)
  }

  const onDismiss = () => {
    setOpened(false)
    setState([])
  }

  return ( 
    <>
      {myComponent()}
      <Modal isOpened={opened} state={state} setState={setState} onDismiss={onDismiss} />
    </>
  )
}

What is happening here is that we pass a state from the Parent to the Modal Component, but every time we close the modal we reset the state we were passing to it.

This solve your problem, but check this section of the beta.reactjs docs

Upvotes: 1

Related Questions