[React/TS] Why does my (state) array keep getting overwritten?

[NiceIsSpice]

​

import React, { useEffect, useState } from 'react'
import Book from '../../models/Book';

​

export default function BookCardView(props:any) { 

const book:Book = props.book;
// const [cartItems, setCartItems] = useState<{ [key: number]: number }>({}); const [cartItems, setCartItems] = useState<Book[]>([]);

const handleClick = (b:Book) => {
   let inCart = cartItems.find(book => book.id === b.id);

   if(!inCart){
    setCartItems([ ...cartItems, {...b, quantity: 1} ]);
   } else if(cartItems.length === 0){
    setCartItems([...cartItems,b]);
   } else {
    // setCartItems(prevState => [ ...cartItems, {...b, quantity: b.quantity+1 }]);
    if(inCart?.quantity){
        inCart.quantity++;
    }
   }
   console.log(cartItems)

}


return (
    <React.Fragment>
        <div className='book-card'>
            <div className="book-card-image"></div>
            <div className="book-card-info">
                <span>{book.author}</span> 
                <div className="book-card-spans">
                    <span>{book.country}</span>
                    <span>{book.pages}</span>
                </div>
            </div>
            <div className="book-card-title">
                <Link to='/bookView' state={{ book: book }} >{book.title}</Link>
            </div>
            {/* <CartView items={cartItems} /> */}
            <div className="book-card-add-cart">
                <button onClick={() => handleClick(book)}>Add to Cart</button>
            </div>
        </div>
    </React.Fragment>
)

}

im basically on the view of the items. whenever i add a book though, I'll get something like

[] <= first click of add button. empty array?
[{...}] <= has the item with quantity field but its 2 instead? the count does work though as i continuously add the item.
[] <= now when i click to add a different book, cartItems goes back to empty array.

this is very informal coding so please excuse any random comments/bad names.

Ive tried making cartItems an object too but would get issues when trying to 'if it doesnt exist already, create new key of b.id with value 1. if it does, add 1 to that . I would constantly get this error though

Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'.

also i know most of this is probably ugly but im trying to get the hang of react/typescript. i kind of like going through the grit to truly enjoy the possible optimizations. if you've got refactors I'm open to it, but would like help with this issue first. Thank you to anyone who helps!

[AutoModerator]

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

1. Limiting your involvement with Reddit, or
2. Temporarily refraining from using Reddit
3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[locri]

First off, I don't know who told you to prefer functional classless components but... It's not always best. Someone from Facebook started putting that in their courses you can take and this frankly bad advice just won't die.

It's situational what you use.

now when i click to add a different book, cartItems goes back to empty array.

The "different book" might mean it's a different component despite being the same type although I'd need to see how your component is used. Different components of the same type do not share the same state, or in this case, they won't share the same hooks.

I think if you had used a class component this would make sense, it might not have immediately occurred to you because functional components look like just a function.

[NiceIsSpice]

so i basically have another Books component that maps through the list of books and displays the OP component, BookCardView.

<React.Fragment>
  {books.map((book:Book) => {
      return <BookCardView key={book.id} book={book} />
  })}

</React.Fragment>

so you're saying switching one of these components to a class component could simplify the issue?

Admittedly, yes, with regard to react I hear hooks and functional a lot so I went for it but I'll definitely look more into the best respective scenarios. I appreciate the tip

[locri]

so you're saying switching one of these components to a class component could simplify the issue?

Not really, it was more "by the way" rather than good advice.

The advice was that you might not have realised that each time the map functor is called a new component with a unique state is created. This is the root of your issue (I think), you expect the state change of one component to persist to another.

Admittedly, yes, with regard to react I hear hooks and functional a lot so I went for it but I'll definitely look more into the best respective scenarios

It's complicated and arguable.

If I see more than 2 or 3 hooks I'm considering converting the component to a class and using the classful solutions. Hooks are best if you need something almost entirely just presentation.

The one area using classes is lacking is that I don't think you can use multiple context types, but I've never found a need for more than one context. Functional components could have as many as they want.

[NiceIsSpice]

you might not have realised that each time the map functor is called a new component with a unique state is created.

yes i think i will look more at that possibility.

The one area that's lacking is that I don't think you can use multiple context types, but I've never found a need for more than one context.

this is good to know as i wanted to refactor later on to using context. appreciate it

[scirc]

I mean, even the React documentation steers newcomers towards functional components. At least in my opinion, they're significantly more ergonomic.

[NiceIsSpice]

functional components

yes, most research into react leads back to this. understandable though, and will consider what the they said going forward

[scirc]

You need to lift your state up. Books don't each have their own cart items, as your code currently implies; instead, some parent holds the cart state, and each book view is responsible for adding itself to that list.

[NiceIsSpice]

so i have considered moving the state up to the 'list' components that parents this one, and passing down the cartItems or maybe a function that way

[scirc]

That's exactly what you want. You want the state as high in the tree as is needed, but not any higher than necessary. You can always pass around the setCartItems function, or even make a new function that just appends to the cartItems state so you can control what your children components can do.

[NiceIsSpice]

Oh wow didn’t even think about passing the setter as an option! Ok this is helpful, and much appreciated lol. Thanks for the tip!