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

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 ></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

CodePudding user response：

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}  />
    })
  })
}

CodePudding user response：

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