Assign a value to a variable in JSX for ReactJS

Question

{props.stories.map((story) =>
    <div key={story.id}>
        {story = story.story}
        <SliderItem story={story} />
    </div>
)}

The above code throws an error saying:

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys

because story in line number 3 is an object.

I can move that condition directly as <SliderItem story={story.story} />, but I want to know if there is any way I can assign my calculated value to a variable and use it in JSX?

I want to apply some logic like:

{ let storyObj = story.type === 'story' && story.story ? story.story : story }

Answer 1

Everything between {} in the JSX is just JavaScript, so you can do the following:

{props.stories.map((story) => {
  const storyObj = (story.type === 'story' && story.story) ? story.story : story;
  return (
    <div key={story.id}>
      <SliderItem story={storyObj} />
    </div>
  );
})}

Answer 2

You can create a function outside the render() that will get correct value:

function getStory(storyObj) {
  return storyObj.type === 'story' && storyObj.story ? storyObj.story : storyObj;
}

And then use it in JSX:

{props.stories.map(storyObj =>
  <div key={storyObj.id}>
     <SliderItem story={getStory(storyObj)} />
  </div>
)}