【Next.js】<> (react fragment)

reactでdomを生成する時、1つ以上タグで構成することができないため、

などで囲う必要がある。

import React from "react";

const BlogCard = () => {
  return (
	  <div> // これ！
		  <h1>HOGE</h1>
		  <p>hogehoge</p>
	  </div>
  )
}

export default BlogCard;

ただ、こうすると無駄にdivタグでネストすることになる

こういう時はreact fragmentで対処する

※Reactをimportする「import React from "react"」が必要

import React from "react";

const BlogCard = () => {
  return (
	  <React.Fragment> // これ！
		  <h1>HOGE</h1>
		  <p>hogehoge</p>
	  </React.Fragment>
  )
}

export default BlogCard;

こうすると無駄なdivがなくレンダリングされる

React.Fragmentは省略も可

import React from "react";

const BlogCard = () => {
  return (
	  <> // これ！
		  <h1>HOGE</h1>
		  <p>hogehoge</p>
	  </>
  )
}

export default BlogCard;