React controlled input with internal state example

ReactControlledInputWithState.jsx

class ControlledInputWithInternalState extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isValid : true,
            value : props.value
        };
    }
    
    componentWillReceiveProps(nextProps) {
        if(nextProps.value !== this.props.value) {
            // new value from the parent - copy it to state
            this.setState({value : nextProps.value});
        }
    }
    
    onValueChanged = (e) => {
        const {value} = e.target;
        // No empty strings
        const isValid = value !== "";
        
        this.setState({value, isValid}, this.onStateUpdated);
    }
    
    onStateUpdated = () => {
        if(this.state.isValid) {
            this.props.onChange(this.state.value);
        }
    }
    
    render() {
        const {value, isValid} = this.state;
        
        let errorMessage = null;
        
        if(!isValid) {
            errorMessage = <div>Oops!</div>
        }
        
        return (
            <div>
                <input
                    type="text"
                    name="theInput"
                    value={value}
                    onChange={this.onValueChanged}
                />
                {errorMessage}
            </div>
        );
    }
}