React Cannot update a component from inside the function body of a different component

Question

I made a form with Formik and react-reaflet, when the user clicks on the button, a map appears with a predefined longitude and latitude and he can navigate on the map and automatically change its location by dragging the cursor.

The functionality works as expected but when I click on the cursor to change the location, React shows me in the console this error Warning: Cannot update a component (Main) while rendering a different component (Formik).. I tried to solve it but it still doesn't work. I created this sandbox so you can see how the error appears on the console

the link is now dead, so we can no longer see the context for the answer. Can you edit (some of) the code into your question? — AncientSwordRage
– AncientSwordRage, Commented Aug 19, 2020 at 15:34

hackape · Accepted Answer · 2020-04-08 04:32:31Z

2

The problem is in components/mapper.js ln:12.

You did:

setLatitude(latitude);
setLongitude(longitude);

right inside a rendering function. Why do you do that?

answered Apr 8, 2020 at 4:32

hackape

20.3k2 gold badges34 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

enoch Over a year ago

I did that because I thought that i could use it as a state in the parent component

hackape Over a year ago

It's just not necessary.

enoch Over a year ago

thank you so much, i delete that and now it's working without errors

eyalyoli · Accepted Answer · 2021-05-03 08:00:42Z

0

Just to generalize what @hackape said, when using functional components, don't use setState plainly on a component's body (you need to initialize the state on definitions or wrap it with useEffect/other callable functions)

Example:

function MyComponent(props){
  const [state, setState] = useState(0)

  setState(5) // This is BAD

  return <View />
}

Solutions:

function MyComponent(props){
  const [state, setState] = useState(5) // This is good

  return <View />
}

// -------- OR ---------
function MyComponent(props){
  const [state, setState] = useState(0)

  useEffect(()=>{
    setState(5) // This is good
  },[])

  return <View />
}

answered May 3, 2021 at 8:00

eyalyoli

2,08220 silver badges20 bronze badges

Collectives™ on Stack Overflow

React Cannot update a component from inside the function body of a different component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related