Beginner React : Render Syntax Error

Question

I'm a beginner in React, so this might be a silly error..

I can't seem to get my render function to work..

I'm getting:

Failed to compile
./src/components/VideoPlayer/VideoList.js
Syntax error: Unexpected token (56:10)

  54 |       <ul>
  55 |         { 
> 56 |           return (
     |           ^
  57 |             this.props.loadedVideos.map(
  58 |                 (videos, index) => {
  59 |                 return <li 

And my code looks like this:

I matched my code to a tutorial online, and I don't see any obvious problems with it, but like I said, I'm a beginner so maybe I'm not understanding how JSX and rendering works?

Please let me know why this is throwing errors...

render () {
    // console.log('>> [VideoList.js] Inside render VIDEOS RECIEVED ',this.props.loadedVideos);

    if(!this.props.loadedVideos) return null;


    return( 
      <ul>
        { 
          return {
            this.props.loadedVideos.map(
                (videos, index) => {
                return <li 
                  className="videoItem" 
                  key={videos.id.videoId}>{videos.snippet.title} | {videos.snippet.channelTitle}
                  </li>
                }
            )
          }
        }
      </ul>
    )
  }

Answer 1

As @Tholle explained in the comment you can use JS expressions in JSX. For an expression you don't need a return. You may need it maybe in a callback function as in your code. But, since you are using an arrow function you don't need curly braces for your function body and return. This should work and slightly clear from your code:

render () {
    // console.log('>> [VideoList.js] Inside render VIDEOS RECIEVED ',this.props.loadedVideos);

    if(!this.props.loadedVideos) return null;

    return( 
      <ul>
        { 
            this.props.loadedVideos.map( videos =>
                    <li 
                       className="videoItem" 
                       key={videos.id.videoId}
                    >
                       {videos.snippet.title} | {videos.snippet.channelTitle}
                    </li> )
        }
      </ul>
    )
  }

Answer 2

You don't need that extra return wrapping the map

return {
         this.props.loadedVideos.map(...
         ... 
}

Just do:

return( 
  <ul>
    { 
        this.props.loadedVideos.map(
            (videos, index) => {
            return <li 
              className="videoItem" 
              key={videos.id.videoId}>{videos.snippet.title} | {videos.snippet.channelTitle}
              </li>
            }
        )          
    }
  </ul>
)