JSX-выражение с условным рендерингом и оценкой значения

Question

class AddOption extends React.Component{
    constructor(props){
        super(props)
        this.handleAddOption = this.handleAddOption.bind(this)
        this.state = {
            error: ''
        }
    }    
handleAddOption(e){
        e.preventDefault()

        const option = e.target.textinput.value;
         // THE FOLLOWING LINE TAKES MY OPTION AND PASSED THROUGH A METHOD 
         //COMMIG FROM PARENT IT VALUATES AND RETURNS THE RESULT
        const error =  this.props.handleAddOption(option);

        this.setState(()=>({error}))
        {!this.state.error && e.target.textinput.value =''}

    }
  render(){
        return (
            <div>
             {this.state.error && <p>{this.state.error}</p>}
            <form onSubmit={this.handleAddOption}>
            <label>textinput:</label>
            <input type="text" name="textinput"/>
            <button>Add Options</button>
            </form>
            </div>
        )
    }

1) Следующий код, вызывающий мой handleAddOption во время отправки моей формы, получает следующую ошибку:

2) Я знаю, что могу использовать

if(this.state.error){
            e.target.textinput.value = ''
        }

3) Но я хочу знать, почему это не удалось?

4) Согласно jsx мы можем хранить любое выражение javascript внутри {}, поэтому я использовал выражение назначения в качестве второго аргумента моего выражения

5) я думаю, что это будет скомпилировано в {true && expression}, что я пропустил и почему {!this.state.error && e.target.textinput.value = ''} не удалось

6) {!this.state.error && {e.target.textinput.value = ''}} все еще показывает мне ошибку