Question

0

74

Views

Set state inside a component in ReactJs

I have this component in my react js application:

import React, { useState } from "react";
import Select, { components, DropdownIndicatorProps } from "react-select";
import { ColourOption, colourOptions } from "./docs/data";

const Component = () => {
  const [state, setState] = useState();
  console.log(state);
  const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;
    setState(menuIsOpen);
    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };

  return (
    <Select
      closeMenuOnSelect={false}
      components={{ DropdownIndicator }}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
};

export default Component;

In the DropDownIndicator component i set the state:

const {
  menuIsOpen
} = props.selectProps;
setState(menuIsOpen);

Setting the state in that place i get the next warning: Warning: Cannot update a component (Component) while rendering a different component (DropdownIndicator). To locate the bad setState() call inside DropdownIndicator .
Question: How can i fix this warning and to make it disappear?
demo: https://codesandbox.io/s/codesandboxer-example-forked-97sx0?file=/example.tsx:0-724

3 months ago ·

Juan Pablo Isaza

2 answers

Answer question

0

Just mark the useState with default value as false

const [state, setState] = useState(false);

looks like when you are doing setState(menuIsOpen); for the first time, its value is undefined and DropdownIndicator is not yet finished with first rendering,

[Hypothesis] There must be some code with React.Component as per the stack trace, based on undefined/null check. But when given initialState, the error is not occurring.

3 months ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-09T06:10:28.133Z

You should call setState inside useEffect

const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;

    useEffect(() => {
        setState(menuIsOpen);
      });

    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. Read more about useEffect

Incase if your setState is depend of menuIsOpen. Pass to useEffect as dependency.

 const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;

      useEffect(() => {
        setState(menuIsOpen);
      },[menuIsOpen]);

    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };

Complete solution on CodeSandbox