Trying to add loop in function of React JS getting JSX expressions must have one parent element

Question

I tried adding <> </> as mentioned in other answers but that dint work. Its a simple function component with return statement:

export default function Merchant4SubscriptionForm(props) {
//some code
return (
//some rendering
<div className="card active rounded bg-primary p-5 my-3 mr-3 text-center">
                            {produts.map(product => (
                                <h4>{product.id}</h4>
                                <h1 className="price">{product.price}</h1>
                                <ul className="no-disk">
                                    <li>{product.month_count} month count</li>
                                    <li>{product.time} Package</li>
                                    <li>{product.title}</li>
                                </ul>
                        ))} //This area shows red however, please check console attached.
                            <img className="img-responsive mt-5" src="2219 [Converted]-01.png" />
                        </div>

 );
}
}

Why did `<> >` not work? That's what it needs. If this is an older project maybe that fragment syntax isn't supported so you could try to wrap it with `...`. But basically, yeah JSX stuff needs to have a single enclosing parent - that's what fragments are for — Jayce444, Jul 29 '20 at 11:28
tried that, dint help. div addition worked but i dont need div there where i added it. Check answer added below — Sakshi, Jul 29 '20 at 11:38

score 0 · Accepted Answer · answered Jul 29 '20 at 11:37

The error got away with simple div added in the starting of the loop. Dint understand why though.

{products.map(product => (
                            <div>
                            <h4>{product.id}</h4>
                            <h1 className="price">{product.price}</h1>
                            <ul className="no-disk">
                                <li>{product.month_count} month count</li>
                                <li>{product.time} Package</li>
                                <li>{product.title}</li>
                            </ul>
                            </div>
                        ))}

Trying to add loop in function of React JS getting JSX expressions must have one parent element

1 Answers1