JSX expressions must have one parent element nextjs

Question

I'm using nextjs/reactjs to create this. I'm following a youtube video tutorial, in tutorial he does the same thing and it works for him but for me it doesn't work.

Any idea?

const Index = (props) => {

  const {posts} = props;
  return(
    <div>
        {posts.map( post => (
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        ))
        }
    </div>
  )
}
Index.getInitialProps = async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts');
  const result = await data.json();

  return {
    posts: result
  }
}

export default Index;

rzwnahmd · Accepted Answer · 2020-04-17 12:51:42Z

1

React doesn't support returning multiple components so you need to wrap them inside a parent component. For this very purpose React provides Fragment or <> </> for shorthand syntax. Change your return statement to this and it'll work:

return(
    <div>
        {posts.map( post => (
          <>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </>
        ))
        }
    </div>
  )

answered Apr 17, 2020 at 12:51

rzwnahmd

1,0825 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

JSX expressions must have one parent element nextjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related