I am trying to refactor This code to a functional component - reactjs

Question

I am trying to refactor this code to a functional component so I dont need to wrap this in a Product Consumer. I keep getting error unexpected token in my functional component and can't figure out why.
This is the original
<ProductConsumer>
{value => {
return value.clothing.map(product => {
return <Product key={product.id} product={product} />;
});
}}
</ProductConsumer>
This is the functional Component
const ProductListComponent = (props) => {
const [loading, setloading] = useState(true)
const productConsumer = useContext(ProductContext);
const { cart } = productConsumer;
useEffect(() => {
(async () => {
await domLoaded;
setTimeout(() => {
console.log('DOM is loaded');
setLoading(false);
console.log(loading)
}, 200);
})();
}, [domLoaded, loading, params, props.location.pathname]);
if (loading === false) {
return (
<React.Fragment>
<Slide>
<header className="bg py-5 mb0 container-fluid clothing ">
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="col-lg-12">
<h1 className="display-4 text-white mt-5 mb-2 text-center">
{props.title}
</h1>
<p
style={props.textStyle}
className="lead mb-5 text-white text-center"
>
{props.description}
</p>
</div>
</div>
</div>
</header>
<div className="py-0 ">
<div className="container">
<div className="row">
return props.items.productConsumer.map(product => {
return <Product key={product.id} product={product} />;
});
</div>
</div>
</div>
</Slide>
</React.Fragment>
)
}else if (loading === true) {
return <Spinner />;
}
}
export default withRouter(ProductListComponent)
I decided to pass in the value.clothing as props so i can reuse the component

Answer 1

The body of a functional component is just a Function, you don't need the wrapping curly brackets:
function Component(props) {
return props.items.productConsumer.map(product => {
return <Product key={product.id} product={product} />;
});
}

Answer 2

This is the correct answer.
{props.items.productConsumer.map(product => {
return <Product key={product.id} product={product} />;
})}