React: Left side of comma operator is unused and has no side effects

The Problem

You tried to expand the content in your component by adding an element before or after an element you were already rendering in this component.

render() {
  return (
    <h1>Your first element</h1>
    <h2>Your second element</h2>
  );
}

The render function of a React component expects a single element to be returned here, but it’s getting two

The Solution

If you’re using a modern version of React, you can most likely wrap both of these elements in a Fragment that will virtually group them into a single element for a return, but won’t render any additional content in your HTML.

render() {
  return (
  	<>
      <h1>Your first element</h1>
      <h2>Your second element</h2>
    </>
  );
}

In React versions prior to 16, you can wrap these in an empty div or span which, while it will render in your HTML, most likely won’t produce any additional side effects.

render() {
  return (
  	<div>
      <h1>Your first element</h1>
      <h2>Your second element</h2>
    </div>
  );
}

Or sometimes it’s a good idea to break one of these elements into its own