Prettier adding semicolon when semi: false-CodePudding

I have a react component with this jsx

  {posts?.map((post) => {
    <Post key={post.id} post={post} />
  })}

When I save the file prettier automatically adds a semicolon infront of <Post ... />. This is causing the component to fail to render.

I have the semi option set to false.

CodePudding user response：

This is happening because currently your map function is not returning anything

<Post key={post.id} post={post} /> needs to be returned by map just like you return jsx inside your react component.

If you want to keep the one line and not explicitly return, change your curly braces to parenthesis to return your jsx

 {posts?.map((post) => (
    <Post key={post.id} post={post} />
  ))}

which is the same as

{posts?.map((post) => {
      return <Post key={post.id} post={post} />;
    })}