Question 73604 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to make iteration of array perfectly which is inside Object such that it doesn't give error on browser refresh in Reactjs?

Problem: I want to access images array each image for single product. Main issue is iteration is working fine but when browser is refreshed it gives error
This my own local api file i made in reactjs i am trying to make e-commerce store for portfolio

{
        id:11,
        name:"Fresco Dining Set",
        price: 178000,
        status:"In Stock",
        totalquantity: 1,
        totalprice: 178000,
        description:"Contemporary design Gold-sharp black legs which complement Enza's custom design",
        category:{
            id:2,
            name:"Chair"
        },
        images:[
            "images/chairs/fresco_dining_set.jpg",
            "images/chairs/fresco_chair.jpg",
            "images/chairs/fresco_dining_table.png",
        ],
        rating:4.0,
        createdate:"2023-03-28"
    },

Problem: I want to access images array each image for single product.

images:[
            "images/chairs/fresco_dining_set.jpg",
            "images/chairs/fresco_chair.jpg",
            "images/chairs/fresco_dining_table.png",
        ],

This is my code right. I am trying to make single product detail.


const SingelProduct = () => {
  const dispatch=useDispatch();
  const {singleData}=useSelector(state=>state.api);
    const param=useParams();
    let pageid=Number(Object.values(param));
    useEffect(()=>{
        dispatch(fetchData(data)) 
        
      dispatch(setDetails(pageid))
  },[data])
  
  return (
    <>
        <div className="singleproduct">
                <div className="singlecontainer">
                         <div className="slideimg">
                          <img src={`/${singleData.images}`}/>
                         </div>         
                       </div>
                    </div>
                </div>
            </div>
    </>
  )
}

Is it good practice to place array in objects like this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to bros! I am posting answer here so if some other can get help from it.

    if your method is working fine before browser refresh and its giving error on browser refresh just like Uncaught TypeError: Cannot read properties of undefined (reading 'map') then You cab use this method

    {singleData.images?singleData.images.map(cur=>{
     return (<img key={cur} src={`/cur`}/>)
 }):"null"}

  2. 0

    As you have an array of images, you need to return several such as:

    <div className="slideimg">
    {singleData?.images?.map((imgSrc) => <img key={imgSrc} src={`/${imgSrc}`}/>)}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search