React is one of the most popular libraries for creating front end apps. It can also be used to create mobile apps with React Native.
In this article, we’ll look at how to render a group of elements and components without a wrapper element with fragments, render lists in React apps, and handle events.
Fragments
In React, fragments are React components that don’t render anything in the DOM. We can use fragments to group components together that are rendered together.
For instance, we can write the following code to use them in our code:
import React from "react";
export default function App() {
return (
<>
<h1>foo</h1>
<h2>bar</h2>
</>
);
}
In the code above, the empty tags are the opening and closing tags for fragments. We used it to wrap around the h1 and h2 elements.
When we inspect the DOM in the browser developer console, we don’t see anything in the DOM that corresponds to the fragment.
We can also write out the long form of the fragment as follows:
import React from "react";
export default function App() {
return (
<React.Fragment>
<h1>foo</h1>
<h2>bar</h2>
</React.Fragment>
);
}
It’s the same thing, but we can pass props to it if necessary. We can’t pass props with the shorthand version.
Fragments are good for grouping anything.
Lists and Keys
We can use the array’s map method to convert array data to React components.
For instance, we can use the map method as follows to map array entries to components we display on the screen as follows:
import React from "react";
const names = ["jane", "john", "joe"];
export default function App() {
return (
<>
{names.map((n, i) => (
<p key={i}>{n}</p>
))}
</>
);
}
In the code above, we have the names array, which we mapped into a list of p elements using the map method. In the callback, we return the p element with the key prop set to a unique value. In this case, we set key ‘s value to the array index, which is unique.
It’s also good for mapping data to elements, as we do in the following code:
import React from "react";
const names = ["jane", "john", "joe"];
const Name = ({ name }) => <p>{name}</p>;
export default function App() {
return (
<>
{names.map((n, i) => (
<Name key={i} name={n} />
))}
</>
);
}
In the code above, we created the Names component, which renders the p element that we have before.
We used map the same way but set the key prop of the Name component instead.
We need to set the key prop to a unique value for each entry so that React can keep track of the element that’s being iterated over with map .
If we skip the keys, then it’s harder to React to figure out how each element should be updated when they change.
Events and Event Handlers
React and HTML event handler is different. The case is different. For instance, in HTML, we create a click handler and attach it to an element by writing the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script>
const onClick = () => {
alert("hello");
};
</script>
</head>
<body>
<button onclick="onClick()">
foo
</button>
</body>
</html>
In the code above, we have the onClick function, which is run when the click event is triggered on the button since we have:
onclick="onClick()"
on our button.
With React, we have something similar. However, the case is different and React events aren’t the same as regular HTML events. They only work on React’s Virtual DOM. The Virtual DOM is React’s representation of the real DOM on our page.
In React apps, we write something like the following to attach a click handler to a button:
import React from "react";
export default function App() {
const onClick = () => alert("hello");
return (
<>
<button onClick={onClick}>foo</button>
</>
);
}
In the code above, we have the onClick function, which is run when the click event on the button in the React’s Virtual DOM is triggered.
Also, we passed in reference to the onClick function rather than running it inside the attribute as we saw in the HTML example. We never run the function inside props, we always pass in the value. Otherwise, React will re-render the component infinite times.
Conclusion
Fragments let us group elements and components together without having to render a wrapper element.
Lists can be created by calling map on an array.
Events handled in React apps by attaching events to React elements. The handler function reference is passed into the appropriate prop to run the function when the event is triggered.
