title: ReactJS unexpected token in return statement
body: <p>I want to return nothing if a context variable is set to none.</p>
  
  <p>But I get unexpected token on if?</p>
  
  <pre><code>return (
      &lt;AppContext.Consumer&gt;
          {context =&gt; (
              if(context.objects[0] !== "none")
                  return;
              &lt;ul&gt;
                {context.objects.map((object, key) =&gt; {
                    return &lt;li key={key}&gt;{object.type}
  //--- snip ----
  </code></pre>
  
  <p>Edit: The whole (working) component code is like this</p>
  
  <pre><code>const ObjectList = (props) =&gt; {
  
      return (
          &lt;AppContext.Consumer&gt;
              {context =&gt; (
                  &lt;ul&gt;
                    {context.objects.map((object, key) =&gt; {
                        return &lt;li key={key}&gt;{object.type}&amp;nbsp;
                              &lt;Button
                                  key={key}
                                  style={{backgroundColor: "red"}}
                                  onClick={() =&gt; context.deleteObject(key)}
                              &gt;
                                  x
                              &lt;/Button&gt;
                          &lt;/li&gt;
                     })}
                  &lt;/ul&gt;
              )}
          &lt;/AppContext.Consumer&gt;
      );
  }
  </code></pre>
  
  <p>But this always renders 1 li element because objects has "none" as an element when it gets initialized in the context provider:</p>
  
  <pre><code>const [objects, setObjects] = useState(['none']);
  </code></pre>
  
  <p>I want the list only be drawn, when there is something else than "none" in the objects array.</p>