How to change previous component's state?

Question

I'm having a rendering issue with some of my components and stumped on how to tell the previous component that its state has updated.

For example:

file 1:
   / ** code ** /
   
   const [var1, var2] = React.useState()

   / ** code ** /

   return( ... <secondComponent x=var1 y=var2 /> ...)

file 2:
   / ** code ** /
   
   // changes to variable x and y
  
   / ** code ** /

The changes go through, but they're not rendered onto the webpage until I react with something else already on the webpage or something that is attached to the component in file 1.

I want the changes to be instantaneous on the page without me having to touch anything on the page.

edit: I'm using only functional components

This should help https://stackoverflow.com/questions/35537229/how-can-i-update-the-parents-state-in-react — Sean, Aug 15 '22 at 17:30

score 0 · Answer 1 · answered Aug 15 '22 at 17:46

0

Try to do this. Just pass the setValue as props and then call them in the child component. Normally setting the state will update it automatically.

file 1:
   / ** code ** /
   
   const [value1, setValue1] = React.useState()
   const [value2, setValue2] = React.useState()

   / ** code ** /

   return( ... <secondComponent setValue1={setValue1} setValue2={setValue2} ...)

answered Aug 15 '22 at 17:46

Wayne Celestin

149
1
6

I have that and it works well for passing props/states but idk why, but my application doesn't want to rerender component 1 on changes. – my compiler is a liar Aug 15 '22 at 18:09
for a component to rerender there must be a change in state. If your not using the state in component 1 it will not render. – Wayne Celestin Aug 15 '22 at 18:15

How to change previous component's state?

1 Answers1