Skip to content

Instantly share code, notes, and snippets.

View pflevy's full-sized avatar

Paulo Levy pflevy

12 followers · 14 following
View GitHub Profile
@pflevy
pflevy / ReactFragmentComponentShortSyntax.js
Created May 17, 2021 19:42
<></>
@pflevy
pflevy / ReactFragmentComponent.js
Created May 17, 2021 19:41
<React.Fragment > </React.Fragment>
@pflevy
pflevy / ReactFragmentKey.js
Created May 17, 2021 19:40
<React.Fragment key={entry.id}>
@pflevy
pflevy / ReactFragmentsExampleWithConditionalRenderingEnhanced.js
Created May 17, 2021 19:39
Using React.Fragment with conditional rendering and storing JSX on a variable.
const MyComponent = (props) => {
const renderFullHeader = () => {
return (
<>
<h2>{entry.header}</h2>
<h3>{entry.subheader}</h3>
</>
);
};
return (
@pflevy
pflevy / ReactFragmentsExampleWithConditionalRendering.js
Created May 17, 2021 19:38
Using React.Fragment with conditional rendering.
const MyComponent = (props) => {
return (
<>
{props.fullHeader ? (
<>
<h2>{entry.header}</h2>
<h3>{entry.subheader}</h3>
</>
) : (
<span>
@pflevy
pflevy / ReactFragmentsExampleWithKeys.js
Created May 17, 2021 19:37
React.Fragment example where keys are required by React.
const MyComponent = (props) => {
return (
<>
{props.entries.map((entry) => (
<React.Fragment key={entry.id}>
<h2>{entry.header}</h2>
<h3>{entry.subheader}</h3>
</React.Fragment>
))}
</>
@pflevy
pflevy / ReactFragmentsShortSyntaxExample.js
Created May 17, 2021 19:36
The best solution is to apply React Fragments when a wrapper element is required since a React Fragment doesn't render an element to the DOM. In this example, the short syntax is used instead of the full syntax.
import React from "react";
const MyComponent = (props) => {
return (
<>
<li>Grouped list item</li>
<li>Grouped list item</li>
<li>Grouped list item</li>
</>
);
@pflevy
pflevy / ReactFragmentsShortSyntax.js
Created May 17, 2021 19:34
Short syntax for <React.Fragment> </React.Fragment>
<> This is a Fragment </>
@pflevy
pflevy / ReactFragmentsExample.js
Created May 17, 2021 19:33
The best solution is to apply React Fragments when a wrapper element is required since a React Fragment doesn't render an element to the DOM.
import React from "react";
const MyComponent = (props) => {
return (
<React.Fragment>
<li>Grouped list item</li>
<li>Grouped list item</li>
<li>Grouped list item</li>
</React.Fragment>
);
@pflevy
pflevy / MissingReactFragments.js
Created May 17, 2021 19:27
You can't create a React components with the code in this file. It's missing a wrapper element, and the best solution is to apply React Fragments.
import React from "react";
const MyComponent = (props) => {
return (
<li>Ungrouped list item</li>
<li>Ungrouped list item</li>
<li>Ungrouped list item</li>
);
};