make array data of objects in usestate() showing in html react

Question

can you guys help me? I am newbie learning react. I have a reacts page like this. I already make a data and i put them inside usesate(). can you guys help me make array data showing up in html?? I am just learning about useState function.

import React, {useState}  from 'react';
import './Soal2.css';
import hamburger from './products/humburger.jpg';
import kimchi from './products/kimchi.jpg';
import topokki from './products/topokki.jpg'
import sushi from './products/sushi.jpg';

function Soal2() {

  const [listProducts, setListProducts] = useState([{
    menu: 'Humburger',
    gambar: {hamburger},
    harga: 10000
  },
  {
  menu: 'Kimchi',
  image: {kimchi},
  harga: 15000
  },
  {
  menu: 'Topokki',
  gambar: {topokki},
  harga: 20000
  },
  {
  menu: 'Sushi',
  gambar: {sushi},
  harga: 25000
  }])



    return (
  </div>  ---> array data showing up here
      </div>
    );
  }
  
  export default Soal2;

the requirement is const [listProducts, setListProducts] and useState([array of objects]) didnt allowed to erase. Please help me :(

All i did is making new component file name productitem.js like this:

function ProductItem(listProducts) {
return (
  <div>
      {listProducts}
  </div>
);

}

export default ProductItem;

and then I am going to return the code to make array data show in html :

{listProducts.map((item, index) => {
    return <ProductItem value={item} key={index}/>
  })}

but the code is error. there is something like : objects are not valid as a react child (found: object with keys {value}), bla bla ---> error code

SO isn't a code writing service, what have you tried? stackoverflow.com/help/minimal-reproducible-example You may find the official React docs for rendering arrays helpful. — Drew Reese
– Drew Reese, Commented Aug 23, 2021 at 5:40
i am making a new component name productitem.js like this : function ProductItem(listProducts) { return ( <div> {listProducts} </div> ); } export default ProductItem; — Firsty Ukhti Molyndi
– Firsty Ukhti Molyndi, Commented Aug 23, 2021 at 5:42

Noel Covarrubias · Accepted Answer · 2021-08-23 05:43:45Z

0

I am sorry didn't fully get what you are trying to achieve. If it is to display the data in the component you would do it like so:

return (
   <div>
   {listProducts.map((item) => {
        <div>
            <p>item.menu</p>
            ...otherProps        
        </div>
    })
    }
   </div>
)

If this is not what you are trying to do, please be more specific to help you, thank you!

answered Aug 23, 2021 at 5:43

Noel Covarrubias

261 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Noel Covarrubias Over a year ago

oh, on the component you are passing the information to, do you have it so that it can take children? if not, do it that's what it's giving you the problem. Just do it like so ``` const myComponent = ({ children }) => { return ( <div>{ children }</div> ) } export default myComponent; ```

Noel Covarrubias Over a year ago

yes, productItem.js should be able to render those children but it will not unless you tell it to. Share the code of it please.

Firsty Ukhti Molyndi Over a year ago

i tried like this, but error expected ',' : const ProductItem({listProducts}) => { return ( <div> {listProducts} </div> )} export default ProductItem; what should i do?

Noel Covarrubias Over a year ago

It should be like this const ProductItem = ({ listProducts }) => {} The syntax of arrow functions, if that's what you have, what error are you getting?

Firsty Ukhti Molyndi Over a year ago

I forgot using equal =. Now the array data still not showing up, but the error is gone. when i tried to change listproperties.menu. the error is Cannot read property 'menu' of undefined. what should i do?

|

Izac Cavalheiro · Accepted Answer · 2021-08-23 05:44:03Z

0

Just use a map to iterate listProducts array:

return <div>
  listProducts.map((product, index) => {
    const key = `product-${product.menu}-${index}`

    return <div key={key}>
      <img src={product.gambar} />
      <span>{product.menu}</span>
      <span>{product.harga}</span>
    </div>
  })
</div>

answered Aug 23, 2021 at 5:44

Izac Cavalheiro

19013 bronze badges

2 Comments

Firsty Ukhti Molyndi Over a year ago

i tried your code but the picture is not showing up. why?

Izac Cavalheiro Over a year ago

product.gambar seems to be a object so you need to change it, for example: gambar: {hamburger} could be gambar: hamburger and the same for the others: gambar: sushi gambar: topokki using like this gambar: {hamburger} makes the item to be an object

Collectives™ on Stack Overflow

make array data of objects in usestate() showing in html react

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related