i have maped list of items in divs and these buttons act as buttons when i click on the div using onClick={(e) => handleCheckClick(ele)} i want to display the cliked items in a table but i am getiing error there is a condition to be satisfied the if a item is clicked 2 wise number of count must be shown

handleCheckClick funtion

 function handleCheckClick(ele) {
   settrayItems([...trayItems, ele.item]);
   settrayPrice([...trayPrice, ele.price]);
  
 }

maping of div

{item &&
         item
           .filter((person) => person.status == "0")
           .map((ele) => {
             return (
               <div
                 className="newmo-card"
                 style={styles.innerbox}
                 onClick={(e) => handleCheckClick(ele)}
               >
                 {`${ele.item}`}
                 <br />
                 <span> {`${ele.total_price}`}</span>
               </div>
              
             );
           })}
 </div>
   <Tray trayItems2={trayItems} trayItems1={trayPrice} />

table of cliked items

function Tray({ trayItems2, trayItems1 }) {
  return (
    <>
      <div className="foo">
        <table>
           {trayItems2 &&
              trayItems2.map((ele) => {
                return (
                  <>
                    <td>{ele}</td>
                    {trayItems1 &&
                      trayItems1.map((ele) => {
                        return <td>{ele}</td>;
                      })}
                  </>
                );
              })}
         
        </table>
      </div>
    </>
  );
}

now my data is comming like this

mango 100 80 orange 100 80

but actualy what i want is

mango 100

orange 80

CodePudding user response：

here why do you manage two diff states? pls check the working demo here.

import { Fragment, useState } from "react";
import "./styles.css";
const item = [
  {
    user_id: 1,
    item: "biriani",
    price: "50",
    selling_price: "60",
    created_at: "2022-08-29T10:12:58.000000Z",
    updated_at: "2022-09-15T06:17:20.000000Z",
    tax: "5%",
    total_price: "80",
    status: 1
  },
  {
    user_id: 5,
    item: "alfarm",
    price: "100",
    selling_price: "120",
    created_at: "2022-09-07T11:06:23.000000Z",
    updated_at: "2022-09-07T11:06:23.000000Z",
    tax: "5%",
    total_price: "140",
    status: 0
  }
];
export default function App() {
  const [trayItems, settrayItems] = useState([]);

  function handleCheckClick(ele) {
    settrayItems([...trayItems, ele]);
  }

  function Tray({ trayItems }) {
    return (
      <>
        <div className="foo">
          <table>
            <tbody>
              {trayItems &&
                trayItems.map((ele, index) => {
                  return (
                    <tr key={index}>
                      <td>{ele.item}</td>
                      <td>{ele.price}</td>
                    </tr>
                  );
                })}
            </tbody>
          </table>
        </div>
      </>
    );
  }

  return (
    <>
      <div>
        {item &&
          item
            .filter((person) => person.status === 0)
            .map((ele, index) => {
              return (
                <div
                  key={index}
                  className="newmo-card"
                  onClick={() => handleCheckClick(ele)}
                >
                  {`${ele.item}`}
                  <br />
                  <span> {`${ele.total_price}`}</span>
                </div>
              );
            })}
      </div>
      <Tray trayItems={trayItems} />
    </>
  );
}

CodePudding user response：

There is a warning that <td> cannot appear as a child of <table>.

Wrap them with <tr>

<div className="foo">
  <table>
    {trayItems2.lenght === trayItems1.lenght &&
      trayItems2.map((ele, index) => {
        return (
          <tr>
            <td>{ele}</td>
            <td>{trayItems1[index]}</td>
          </tr>
        );
      })}
  </table>
</div>

Because of using trayItems1[index] to get map items in another array so you need to pre-check them. You need to refine it for tighter conditions:

Also, using two arrays is redundant. Merge them could be easier.