I have a little component like this (Code below is simplified to the parts needed) that behaves very strange when it comes to updating the state.

```
class Componenent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showStuff: false};
  }

  render() {
    return(
      //Markup
        {this.state.showStuff && (
          <button onClick={() => this.setState({showStuff: false})} />
        )}
      // More Markup
    );
  }
}

```

The state gets updated somewhere else in the component, so the prop is `true` when the button is clicked.
A click also triggers the `setState` function (callback gets executed), however the state does not update.

---

My guess is that it does not update because the function is called by an element that directly depends on the state prop to be visible.   

I figured out that adding another prop `test: true` to the state and changing that property to `false` when the button is clicked also triggers the `showStuff` prop to change to false. So it works when I make strange hacks.   

Can someone explain this weird behavior to me? I can't gasp why the above snippet does not work like intended.

---

Here is the entire component:

```
class ElementAdd extends React.Component {
    constructor(props) {
        super(props);

        this.defaultState = {
            showElementWheel: false,
            test: true
        };

        this.state = this.defaultState;
    }

    handleAddCardClick() {
        if (this.props.onCardAdd) {
            this.props.onCardAdd({
                type: ElementTypes.card,
                position: this.props.index
            });
        }
    }

    handleAddKnowledgeClick() {
        if (this.props.onCardAdd) {
            this.props.onCardAdd({
                type: ElementTypes.knowledge,
                position: this.props.index
            });
        }
    }

    handleTabPress(e) {
        if (e.key === 'Tab') {
            e.preventDefault();
            let target = null;

            if (e.shiftKey) {
                if (e.target.previousSibling) {
                    target = e.target.previousSibling;
                } else {
                    target = e.target.nextSibling;
                }
            } else {
                if (e.target.nextSibling) {
                    target = e.target.nextSibling;
                } else {
                    target = e.target.previousSibling;
                }
            }
            target.focus();
        }
    }

    hideElementWheel() {
        // This is somehow the only option to trigger the showElementWheel
        this.setState({ test: false });
    }

    render() {
        return (
            <div
                className="element-add"
                style={{ opacity: this.props.invisible ? 0 : 1 }}
                onClick={() => this.setState(prevSate => ({ showElementWheel: !prevSate.showElementWheel }))}
            >
                <PlusIcon className="element-add__icon" />
                {this.state.showElementWheel && (
                    <React.Fragment>
                        <div className="element-add__wheel">
                            <button
                                autoFocus
                                className="element-add__circle"
                                onClick={this.handleAddCardClick.bind(this)}
                                onKeyDown={this.handleTabPress.bind(this)}
                                title="New element"
                            >
                                <ViewModuleIcon className="element-add__element-icon" />
                            </button>
                            <button
                                className="element-add__circle"
                                onClick={this.handleAddKnowledgeClick.bind(this)}
                                onKeyDown={this.handleTabPress.bind(this)}
                                title="New knowledge-element"
                            >
                                <FileIcon className="element-add__element-icon" />
                            </button>
                        </div>
                        <div
                            className="element-add__close-layer"
                            onClick={() => {
                                this.hideElementWheel();
                            }}
                        />
                    </React.Fragment>
                )}
            </div>
        );
    }
}

```