React.js

setState.js

const nodeInfoMap = require.native("torq-native/dom").nodeInfoMap;

export default class ComponentSelector extends React.Component {
    constructor(props) {
        super(props);
        this.updateComponent = this.updateComponent.bind(this);
        this.state = {
            component: null
        };
    }

    // wrong_1
    updateComponent_1(e) {
        this.setState({ component: e.target.value });
        console.log("state component value = ", this.state.component); // logs stale value
        console.log("event target value = ", e.target.value);
    }

    // fix_1
    updateComponent_2(e) {
        this.setState({ component: e.target.value }, () => {
            console.log("state component = ", this.state.component);
            console.log("event target value = ", e.target.value);
        });
    }

    // wrong_2
    updateComponent_3(e) {
        this.setState(() => { component: e.target.value }, () => {
            console.log("state component value = ", this.state.component); // throws an error
            console.log("event target value = ", e.target.value);
        });
    }

    // fix_2
    updateComponent_3(e) {
        const v = e.target.value;
        this.setState(() => { component: e.target.value }, () => {
            console.log("state component value = ", this.state.component); // logs current value
            console.log("event target value = ", e.target.value);
        });
    }
    render() {
        return (
            <div>
                <select onChange={this.updateComponent}>
                    <option value="body"> body </option>
                    <option value="button"> button </option>
                    <option value="div"> div </option>
                    <option value="embed"> embed </option>
                    <option value="frame"> frame </option>
                    <option value="html"> html </option>
                    <option value="hr"> hr </option>
                    <option value="img"> img </option>
                    <option value="input"> input </option>
                    <option value="menu"> menu </option>
                    <option value="menuitem"> menuitem </option>
                    <option value="select"> select </option>
                    <option value="span"> span </option>
                    <option value="text"> text </option>
                    <option value="option"> option </option>
                    <option value="view"> view </option>
                </select>
            </div>
        );
    }
}