In this tutorial we'll see what is React.Fragment and how to use it. Table of contents Why React Fragment React Fragment Usage Fragment short syntax Key with Fragments Why React Fragment When you write a React component there is a constraint that the JSX expression the component will render should always be wrapped with in a single parent element. Which means trying to write a component as given below results in an error. const HelloWorld = (props) => { return ( <h2>{props.title}</h2> <p>{props.message.greeting} {props.message.name}</p> ); } The error you get for this component will be something like this- Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? Most frequently <div> is used as a wrapper in such scenarios. const HelloWorld = (props) => { return ( <div> <h2>{props.title}</h2> <p>{props.message.gr
Java, Spring, Web development tutorials with examples