title: unable to correct the error of Unexpected token, expected ":" in reactjs
body: <p>my state variable contains an array of objects(where is each object contains username,user_DP,imageUrl, caption) which is to be rendered but while using map() to render gives an error that I am unable to resolve.</p>
  <p>example of state variable :</p>
  <pre><code>this.state = {
        route: 'signin',
        postDetails: [...]
      };
  </code></pre>
  <p>and my render() looks like</p>
  <pre><code>render(){
      const {route, postDetails} = this.state;
      return (
        &lt;div className=&quot;App&quot;&gt;
        {
          route === 'home' ?
            &lt;Navbar/&gt;
              {
                postDetails.map((post,index)=&gt;{
                  return(&lt;Post 
                          key = {index} 
                          username = {post.username} 
                          user_DP = {post.user_DP}
                          imageUrl = {post.imageUrl}
                          caption = {post.caption}
                        /&gt;);      
                })
              }
            :
            (
              route === 'signin'?
                &lt;Signin onRouteChange = {this.onRouteChange}/&gt;
                :
                &lt;Signup onRouteChange = {this.onRouteChange}/&gt;
            )
        }
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>I am getting an error like this</p>
  <pre><code>Syntax error: Unexpected token, expected &quot;:&quot; (44:13)
  
    42 |         route === 'home' ?
    43 |           &lt;Navbar/&gt;
  &gt; 44 |             {
       |             ^
    45 |               postDetails.map((post,index)=&gt;{
    46 |                 return(&lt;Post 
    47 |                         key = {index}
  </code></pre>
  <p>please help in removing this error it will greatly help me.</p>