Set state inside a component in ReactJs

Question

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

Jasur Kurbanov · Accepted Answer · 2021-12-02 08:27:07Z

1

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

answered Dec 2, 2021 at 8:27

Jasur Kurbanov

8303 gold badges11 silver badges23 bronze badges

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

Comments

Harsh Mehta · Accepted Answer · 2021-12-02 08:42:31Z

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.

answered Dec 2, 2021 at 8:42

Harsh Mehta

1315 bronze badges

Collectives™ on Stack Overflow

Set state inside a component in ReactJs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related