title: Assign a value to a variable in JSX for ReactJS
body: <pre><code>{props.stories.map((story) =&gt;
      &lt;div key={story.id}&gt;
          {story = story.story}
          &lt;SliderItem story={story} /&gt;
      &lt;/div&gt;
  )}
  </code></pre>
  
  <p>The above code throws an error saying:</p>
  
  <blockquote>
    <p>Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys</p>
  </blockquote>
  
  <p>because <code>story</code> in line number 3 is an object. </p>
  
  <p>I can move that condition directly as <code>&lt;SliderItem story={story.story} /&gt;</code>, but I want to know if there is any way I can assign my calculated value to a variable and use it in JSX? </p>
  
  <p>I want to apply some logic like: </p>
  
  <pre><code>{ let storyObj = story.type === 'story' &amp;&amp; story.story ? story.story : story }
  </code></pre>