onChange vs onKeyPress for input in React
Don't complicate your code; the first solution is just fine but needs some tweaking:
handleChange(event) {
    this.setState({value: event.target.value});
}

handleEnter(event) {
    if (event.key === 'Enter') {
        this.props.theFunction(this.state.value);
    }
}

Or, you can use what they call a guard clause and make it short and readable:
handleEnter(event) {
    if (event.key !== 'Enter') return; 
    this.props.theFunction(this.state.value);
}

And if you're using react hooks:
const handleChange = (e) =&gt; {
    setInputValue(e.target.value);
}

const handleEnter = (e) =&gt; {
    if (e.key === &quot;Enter&quot;) {
        if (value !== &quot;&quot;) {
            console.log(&quot;Hello&quot;, name);
        } 
        else {
            alert(&quot;can't pass empty string&quot;);
        }
        setInputValue(&quot;&quot;);
    }
}