How can I add those values into the useState objects?-CodePudding

In the _app.js file I used AppContext.Provider and I added the card and setcard to it:

export default function MyApp({ Component, pageProps }) {
  const [count, setcount] = useState(0);
  const [card, setcard] = useState({
    pic: "",
    des: "",
    price: "",
    scroe: "",
  });

  return (
    <AppContext.Provider
      value={{
        count,
        setcount,
        card,
        setcard,
      }}
    >
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AppContext.Provider>
  );
}

I'm using useContext and map in the Mycards.js component:

const context = useContext(AppContext);

{Myjson.slice(firstpostindex, lastPostIndex).map((item) => {
  return (
    <Grid item key={item.itemId}>
       I removed the content here
    </Grid>

And inside the Grid I'm using the following code to add the value of item.itemMainPic to pic and it is working:

  <Button
    value={item.itemMainPic}
    sx={{ width: 308 }}
    variant="contained"
    endIcon={<AddShoppingCartIcon />}
    onClick={(e) => {
      context.setcount(context.count   1);
      context.setcard({ pic: e.target.value });
    }}
  >
    add to card
  </Button>

I need to add the values of item.itemMainPic item.itemName item.rangePriceFormat item.score inside pic des price score I thought that I could easily use something like this:

context.setcard({ pic: e.target.item.itemMainPic});
context.setcard({ des: e.target.item.itemName});
context.setcard({ price: e.target.item.rangePriceFormat});
context.setcard({ score: e.target.item.score});

But I'm getting this error:

Cannot read properties of undefined (reading 'itemMainPic')

How can I add those values into the useState objects?

And when I'm clicking on the button multiple times, using console.log(context.card); I can see these:

{ "pic": "https://valid URL1.jpg" }
{ "pic": "https://valid URL2.jpg" }
{ "pic": "https://valid URL3.jpg" }

But what should I do to store them like this:

[
    { "pic": "https://valid URL1.jpg" },
    { "pic": "https://valid URL2.jpg" },
    { "pic": "https://valid URL3.jpg" }
]

I want console.log(context.card); look like this:

[
    { "pic": "https://valid URL1.jpg","des": "something", "score": "something", "price": "something"},
    { "pic": "https://valid URL2.jpg","des": "something", "score": "something", "price": "something"},
    { "pic": "https://valid URL3.jpg","des": "something", "score": "something", "price": "something"}

]

CodePudding user response：

I think your card useState should be an array since you want output to be an array of object, so change your card useState to be something like this below;

const [card, setCard] = useState([])

then to add new card object into the card array you can have a function that takes in the item/card you want to add, lets call the function addToCard;

const addToCard = (item) => {
  const newCard = {
    pic : item.itemMainPic,
    des : item. itemName,
    price : item. rangePriceFormat,
    score : item. score,
 }

 context.setcount(context.count   1);
 
 context.setcard(prev => [...prev, newCard]);

}

Then in your button you can the addToCard function like this

     <Button
      sx={{ width: 308 }}
      variant="contained"
      endIcon={<AddShoppingCartIcon />}
      onClick={() => addToCard(item)}
     >
       add to card
    </Button>

CodePudding user response：

Just update your 1 line of context.setcard on button click. Please try below code.

context.setcard(...context.card, { pic: item.itemMainPic, des: item.itemName, price: item.rangePriceFormat, score: item.score});

You don't have to write context.setcard for each key. Let me know if it works for you.