react fragment
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}react fragment
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}react fragment
render() {
return (
<>
<div><div/>
<div><div/>
<div><div/>
</>
);
}how to use react fragment
//the same way you'd use any other element
//except that it doesn't support keys or attributes.
render() {
return (
<>
<p>Hello</p>
<p>World!</p>
</>
);
}why we use fragment in react
//when we are trying to render more than one root element we have to put the
//entire content inside the ‘div’ tag.
//Fragments to the rescue. Fragments are a modern syntax for adding multiple
//elements to a React Component without wrapping them in an extra DOM node.
//React Fragments do not produce any extra elements in the DOM, which means
//that a Fragment’s child components will be rendered without any wrapping DOM
//node.
//example:
function FragementDemo(){
return (<React.Fragement>
<h1>Hello world</h1>
<p>This is a react fragment Demo </p>
</React.Fragment>)
}returned data has p tags react
return <div dangerouslySetInnerHTML={{ __html: yourStringWithHtmlInIt }} />;Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
