How can I add sections using map and props in the following code

Question

I have a card called CardItems.jsx which defines a card only and then I have Gotocart. jsx where I have welcome section (like welcome to cart) and at last an order section(like order now).

In between these two I want to add the cart sections for which then the user will click "add item" on another page then some id will be stored in infoarray all that thing is working correctly and I am able to console the correct name and image but I am not able to add sections.

this is the Cartitme.jsx

import React from 'react'
import cartstyle from './cartstyle.css'
import { useState } from 'react';
import { data } from './Data';
//  below is destructuring
export default function Cartitems(props) {
    const [cart, setcart] = useState(data);
    return (
        <div>

            <div className="information">

                <div className="imagecart">
                    <img className='img12' src={props.images} alt="error" />
                    <div className="nameofitem"> {props.name} </div>
                </div>

                <div className="quantity">
                    <button className="minus">-</button>
                    <button className="quantity">1</button>
                    <button className="add">+</button>
                    <i class="fa-solid fa-trash"></i>
                </div>

            </div>

        </div>
    )
}

And this is the Gotocart.jsx

import React from 'react'
import { useState } from 'react'
// import Gotocart from './Gotocart.css'
import {data} from './Data'
import Cartitems from './Cartitems';
import { infoarray } from './Menu';
export default function Gotocart(props) {
  let index = document.getElementsByClassName('cart-info');
  return (
    <div className='cartbody'>

      <div className="heading">
        <div></div>
        <div className="welcome">
        Welcome To the Cart
        </div>
        </div>

      <div className="thanks">
        <div></div> THANKS FOR VISITING
        </div>
      <div className="cart-info">

      {
        data.map((e) => {
          infoarray.map((ank) =>{
              if(e.id==ank){
                console.log(e.name , e.images) ; 
                return <Cartitems name={e.name} images={e.images}  />
              }
          })
        })
      }
      </div>
      <div className="order">
        <div></div>
        ORDER NOW
      </div>
    </div>
  )
}

how can I see a list of card over Gotocart section

Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — Konrad, Sep 28 '22 at 17:57
No am not getting it am I doing something wrong in the return section please let me know what I need to change sir — Ankit, Sep 28 '22 at 18:01

score 1 · Answer 1 · answered Sep 28 '22 at 18:03

1

You forgot to return. You should filter the data as well

{
  data.map((e) => {
    return infoarray.filter(ank => ank === e.id).map((ank) =>{
      return <Cartitems name={e.name} images={e.images}  />
    })
  })
}

answered Sep 28 '22 at 18:03

Konrad

21,590
4
28
64

I forgot to add here I added in my original code, but added only one return. I am still not able to add my cards in the Gettocart.jsx sir. Am I doing something wrong with the props?? – Ankit Sep 28 '22 at 18:06
1

You have to have both returns. You have to also render something for each iteration – Konrad Sep 28 '22 at 18:08

score 1 · Answer 2 · answered Sep 28 '22 at 18:21

1

As someone commented before, you must return something in the map iteration, and also render the component like this

{
  data.map((e) => {
    return infoarray.filter(ank => ank === e.id).map((ank) =>{
    return (<Cartitems name={e.name} images={e.images}  />)
   })
 })
}

if after doing this you can't still see your component is because you probably have an error on it

answered Sep 28 '22 at 18:21

Jairo Py

615
6
12

Mam I have checked the console there is no error and I am able to access the correct name and image. But this is still not working, would you mind checking the Cartitem.jsx (the first code) if props and all is fine. – Ankit Sep 28 '22 at 18:25
1

Can you post a sandbox with all the rest of the code? – Jairo Py Sep 28 '22 at 18:26

How can I add sections using map and props in the following code

2 Answers2