JSX expressions must have one parent element.ts(2657) react error

Question

I'm trying to create the frontend of the application and keep getting the following error Please help me Here is my code.

function App() {
  return (
    <div>
      <header>
        <a href="/">amazona</a>
      </header>
      <main>
        <h1>Featured Products</h1>
        <div className="products">
          {data.products.map((product) => (
            <div className="product" key={product.slug}>
              <a href={`/product/${product.slug}`}>
                <img src={product.image} alt={product.name} />
              </a>
              <div className="product-info">
                <a href={`/product/${product.slug}`}>
                  <p>{product.name}</p>
                </a>
                <p>
                  <strong>${product.price}</strong>
                </p>
                <button>Add to cart</button>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
    <BrowserRouter>
      <div>
        <header>
          <Link to="/">amazona</Link>
        </header>
        <main>
          <Routes>
            <Route path="/product/:slug" element={<ProductScreen />} />
            <Route path="/" element={<HomeScreen />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

I don't know how to solve this problem. can you help me?

As it says, you're JSX needs a single parent element. Wrap it all in a div or a fragment. — jmargolisvt, Dec 19 '22 at 13:39
Does this answer your question? [Why do I get the error "expressions must have one parent element", how do I fix this?](https://stackoverflow.com/questions/48886726/why-do-i-get-the-error-expressions-must-have-one-parent-element-how-do-i-fix) — jmargolisvt, Dec 19 '22 at 13:41

Jan Port · Answer 1 · 2022-12-19T13:42:45.750

You need to wrap your JSX return element into one Element. You are returning JSX.Element and not JSX.Element[]. All you need to do is wrap the return element into <></> like this:


   function App() {
     return (
       <>
        <div>
         <header>
           <a href="/">amazona</a>
         </header>
         <main>
           <h1>Featured Products</h1>
           <div className="products">
             {data.products.map((product) => (
               <div className="product" key={product.slug}>
                 <a href={`/product/${product.slug}`}>
                   <img src={product.image} alt={product.name} />
                 </a>
                 <div className="product-info">
                   <a href={`/product/${product.slug}`}>
                     <p>{product.name}</p>
                   </a>
                   <p>
                     <strong>${product.price}</strong>
                   </p>
                   <button>Add to cart</button>
                 </div>
               </div>
             ))}
           </div>
         </main>
       </div>
       <BrowserRouter>
         <div>
           <header>
             <Link to="/">amazona</Link>
           </header>
           <main>
             <Routes>
               <Route path="/product/:slug" element={<ProductScreen />} />
               <Route path="/" element={<HomeScreen />} />
             </Routes>
           </main>
         </div>
       </BrowserRouter>
      </>
     );
   }

JSX expressions must have one parent element.ts(2657) react error

1 Answers1