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>
    )
  }

{} inside of JSX expects an expression, so you can just give it your array straight away. {this.props.loadedVideos.map(...)} — Tholle
– Tholle, Commented Jul 18, 2018 at 15:55
ohhh ok.. for some reason I thought everything needed to be wrapped in a return.. but this makes more sense... I think I get it now.. thanks guys :) — Cmaxster
– Cmaxster, Commented Jul 18, 2018 at 15:57

eblin · Accepted Answer · 2018-07-18 15:57:11Z

1

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>
)

answered Jul 18, 2018 at 15:57

eblin

4462 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devserkan · Accepted Answer · 2018-07-18 16:11:34Z

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>
    )
  }

Collectives™ on Stack Overflow

Beginner React : Render Syntax Error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related