Reaction fragment

How to use React.Fragment to create invisible HTML tags

Note how I wrap the return value indiv. This is because the component can only return one element, if you want more than one, you need to wrap it with another container tag.

However, this leads to unnecessarydivIn the output. You can avoid this by using the following methodsReact.Fragment:

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <React.Fragment> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </React.Fragment> ) } }

It also has a very good shorthand syntax<></>Only supported in the latest version (and Babel 7+):

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

Download mine for freeResponse Handbook


More response tutorials: