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
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
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.