React js Dynamic components error

#1

Please help me out to solve my error

Here is my code for ProductItem.js:-
import ‘./ProductItem.css’

function ProductItem() {
const productName=‘Begineer to advance React’;
const productType=‘Book’;
const productPrice=1833;

return {
{productName}

{productType}

{productPrice}
}; }

export default ProductItem;

Here is my Code for App.js:-
import ProductItem from ‘./components/ProductItem’

function App() {
return (

    <div>
    <h1>App Component</h1>
    <ProductItem></ProductItem>
     <ProductItem></ProductItem>
      <ProductItem></ProductItem>
       <ProductItem></ProductItem>
    </div>
  );

}

export default App;

#2

@rs4755524 What exactly is the issue? Please elaborate with screenshots of the error you see. Please share more context so that we can pinpoint the issue and help you faster.

#3

Screenshot (2)
Screenshot (2)1920×1080 375 KB

These is the Error I am getting please help me out

1 Like
#4

Hi @rs4755524 The screenshot suggests a screenshot error. Replace the {} you used for return on line 8 with ():

function ProductItem() {
    const productName=‘Begineer to advance React’;
    const productType=‘Book’;
    const productPrice=1833;
    return (
        {productName}
        {productType}
        {productPrice}
    );
}

Try this out and see if this solves your problem. Let me know.

1 Like