[英]Trying to add loop in function of React JS getting JSX expressions must have one parent element
I tried adding <> </>
as mentioned in other answers but that dint work.我尝试像其他答案中提到的那样添加
<> </>
但那确实有效。 Its a simple function component with return statement:它是一个带有返回语句的简单 function 组件:
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>
);
}
}
The error got away with simple div added in the starting of the loop.在循环开始时添加简单的 div 就可以避免错误。 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>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.