Why You Can't Return Parallel JSX Elements. The Hack!

By Philip Obosi

The Answer

JavaScript as a language doesn’t support multiple return values. In writing React code, your JSX (JavaScript XML) eventually gets transpiled into vanilla JavaScript. When this happens, parallel JSX elements are transpiled into multiple return values which isn’t a feature supported by the language(JavaScript).

A Deeper Dive into Return Statements, JavaScript and JSX

If you’ve written React for quite sometime, you probably have noticed an error of this sort that occurs whenever you try to return more than one element from a React component i,e

import React from 'react'

const Loading = () => {
  return (
    <p>Another parent element</p>
    <div className="text-center">
      <i className="fas fa-spinner fa-3x"></i>
      <h4 className="mb-3">This may t

Source:: scotch.io