another case when the state of a component changes but seems that the component does not

Question

I have a react component that has a state variable:

showEditor

when showEditor is false it is supposed to show only a div with some number inside it (initially showEditor is false). If this state variable is true my react component is supposed to show a textbox and a button with "save" label inside another div -making dissapear the first div with the number-. This textbox will be used to change the number. For the first div (the one that only shows a number) I defined:

<div onClick={this.showEditorProc}>
    { this.state.showEditor ?
        <div ....>
            { just the numeric value }
        </div>
        :
        <div ....>
            textBox
            <button onClick={save and make show Editor false}>
                Save
            </button>
        </div>
    </div>

the function this.showEditorProc will modify the state of the showEditor variable to true and the save button and textbox components will appear (inside another div too). I created a function that will executed if the save button is clicked. This function modifies the showEditor variable to false however, I can not see the div with just the numeric value. Instead I still see the textbox with the save button. Is there something else I could be missing? Here it is the code of my component:

import React from 'react';
import ReactDOM from 'react-dom';
import NumberFormat from 'react-number-format';

export class NumericBox extends React.Component {
    constructor() {
        super();

        this.state = {
            enteredValue: '',
            showNumEditor: false,
            index: ''
        };
        this.showNumericEditor = this.showNumericEditor.bind(this);
        this.handle_enteredValue_change = this.handle_enteredValue_change.bind(this);
        this.saveCellInfo = this.saveCellInfo.bind(this);
        this.loadBasicInformation = this.loadBasicInformation.bind(this);
    }


    saveCellInfo(e){
        alert(this.state.index);

        /*  cellAuxParams = new Map([['updateCellValue', this.state.updateCellValue]]); */

        console.log('numericBox.js>saveCellInfo>cellAuxParams= ------------------------------------------------ ' + 28);
        console.log(this.props.cellAuxParams);

        var f = this.props.cellAuxParams.get('updateCellValue');

        this.setState({showNumEditor: false}, () => f(this.state.Index, '77'));
    }

    handle_enteredValue_change(values) {
        const {formattedValue, value} = values;
        // formattedValue = $2,223
        // value ie, 2223

        this.setState({enteredValue: value});
    }

    showNumericEditor()
    {
        this.setState({showNumEditor: true})
    }


    loadBasicInformation()
    {
        this.setState({enteredValue: this.props.enteredValue,
            index: this.props.index
        });
    }

    componentDidMount(){
        this.loadBasicInformation();
    }

    componentWillReceiveProps(nextProps){
        alert(nextProps.enteredValue);
        this.setState({enteredValue: nextProps.enteredValue}, () => this.loadBasicInformation());
    }

    render() {
        const table4controls = {
            display: 'table',
            width: this.props.style.width,
            backgroundColor: 'white',
            border: '0px solid #666666',
            borderSpacing: '0px',
            paddingBottom: '0em',
            paddingTop: '0em'
        };

        const table4controls_RowStyle = {
            display: 'table-row',
            width: 'auto',
            clear: 'both',
            borderBottom: '5px'
        };

        const table4controls_ColsStyleA = {
            float: 'left',
            display: 'table-column',
            width: '60px',
            backgroundColor: 'white'
        };

        const table4controls_ColsStyleB = {
            float: 'left',
            display: 'table-column',
            width: '20px',
            backgroundColor: 'white'
        };

        const table4controls_ColsStyleC = {
            float: 'left',
            display: 'table-column',
            width: '20px',
            backgroundColor: 'white'
        };

        const btnStyle={

        };

        return (
            <div onClick={this.showNumericEditor}>
                { this.state.showNumEditor ?
                    <div style ={table4controls}>
                        <div style={table4controls_RowStyle}>
                            <div style={table4controls_ColsStyleA}>
                                <NumberFormat style={{width: '60px'}}
                                              value={this.state.enteredValue}
                                              thousandSeparator={true}
                                              prefix={this.props.prefix}
                                              onValueChange={this.handle_enteredValue_change}
                                />
                            </div>

                            <div style={table4controls_ColsStyleB}>
                                <button style={btnStyle} onClick={() => this.saveCellInfo(this.state.index)}>
                                    &#x25B2;
                                </button>
                                <button style={btnStyle} onClick={() => this.saveCellInfo(this.state.index)}>
                                    &#x25BC;
                                </button>
                            </div>

                            <div style={table4controls_ColsStyleC}>
                                <button style={btnStyle} onClick={(e) => {this.saveCellInfo(e, this.state.index)}}>
                                    Save
                                </button>
                            </div>
                        </div>
                    </div>
                    :
                    <div syle={table4controls_ColsStyleA}>
                        {this.state.enteredValue}
                    </div>
                }
            </div>
        );
    }
}

Answer 1

You have an onClick={this.showNumericEditor} handler on the surrounding div, so when you press the save button, the click event bubbles up and invokes a this.setState({showNumEditor: true}).

To fix it, you can either restructure the rendering or call e.stopPropagation(); at the start of saveCellInfo. Also note that some of your this.saveCellInfo calls are not passing the event.