title: jsx expression with conditional rendering and evaluating a value
body: <pre><code>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(()=&gt;({error}))
          {!this.state.error &amp;&amp; e.target.textinput.value =''}
  
      }
    render(){
          return (
              &lt;div&gt;
               {this.state.error &amp;&amp; &lt;p&gt;{this.state.error}&lt;/p&gt;}
              &lt;form onSubmit={this.handleAddOption}&gt;
              &lt;label&gt;textinput:&lt;/label&gt;
              &lt;input type="text" name="textinput"/&gt;
              &lt;button&gt;Add Options&lt;/button&gt;
              &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>1) The following code calling my handleAddOption while my form is being submited
  am getting the following  error that , expected </p>
  
  <p>2) I know That i can use </p>
  
  <pre><code>if(this.state.error){
              e.target.textinput.value = ''
          }
  </code></pre>
  
  <p>3) But i want to Know why it failed  ?</p>
  
  <p>4) According to jsx we can keep any javascript expression  inside {}  so i used Assignment Expression  as second argument of my expression</p>
  
  <p>5) i am thinking it will compiled to <code>{true &amp;&amp; expression}</code> ,what did i miss and why  <code>{!this.state.error &amp;&amp; e.target.textinput.value = ''}</code> failed </p>
  
  <p>6)    <code>{!this.state.error &amp;&amp; {e.target.textinput.value = ''}}</code> still showing me error  </p>