Objective is to have an array with captured pokemons if user clicks on the input and an array of not-captured pokemons if user un-clicks the input. I've managed to filter out the pokemon when it's no longer captured and have it in the not-captured array but I can't seem to delete that pokemon from the old captured array. Eg. If I click on "bulbasaur", "charmender", "squirtle", I get them all in the captured array. If I then remove one of them, I correctly get the removed one in the not-captured array but I can't seem to delete it from the previous captured array.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import PokemonIcon from "./PokemonIcon";

const PokemonCard = ({ pokemon, capturedPkm, setCapturedPkm, notCapturedPkm, setNotCapturedPkm }) => {
    const [label, setLabel] = useState('Not captured')

    const toggleCaptured = (checked, id) => {
        const pokemonName = { id: pokemon.id, name: pokemon.name }

        if (checked && id === pokemon.id) {
            setCapturedPkm([...capturedPkm, pokemonName])
            setLabel('Captured!')
        } else {
            setLabel('Not captured!')
            setNotCapturedPkm([...notCapturedPkm, pokemonName])
            if (checked === false) {
                let newArr = [...capturedPkm]
                let pkmRemoved = newArr.filter((el, i) => el.id === id)
                let newArrPkm = newArr.splice(pkmRemoved, 1)
                console.log('newArr',newArrPkm, 'pkmRemoved', pkmRemoved)
                setCapturedPkm(newArrPkm)
            }
        }

    }
    useEffect(() => {
        console.log('captured', capturedPkm, 'not captured', notCapturedPkm)
    }, [capturedPkm, notCapturedPkm])

    return (
        <>
            <div
                className="pokemon-card"
                style={{
                    height: "250px",
                    maxWidth: "250px",
                    margin: "1rem",
                    boxShadow: "5px 5px 5px 4px rgba(0, 0, 0, 0.3)",
                    cursor: "pointer",
                }}
            >
                <Link
                    to={{ pathname: `/pokemon/${pokemon.id}` }}
                    style={{ textDecoration: "none", color: "#000000" }}
                    state={{ pokemon: pokemon, capturedPkm }}
                >
                    <div
                        style={{
                            padding: "20px",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                        }}
                    >
                        <PokemonIcon img={pokemon.sprites?.['front_default']} />
                    </div>
                </Link>
                <div style={{ textAlign: "center" }}>
                    <h1>{pokemon.name}</h1>
                    <label>
                        <input type="checkbox"
                            defaultChecked={false}
                            value={pokemon.name}
                            onChange={(e) => toggleCaptured(e.target.checked, pokemon.id)} />
                        <span style={{ marginLeft: 8, cursor: 'pointer' }}>
                            {label}
                        </span>
                    </label>
                </div>
            </div>
            <div></div>
        </>
    );
};

export default PokemonCard;

CodePudding user response：

I guess you forgot to update the notCapturedPkm array. You could try something like this :

if (checked && id === pokemon.id) {
    setCapturedPkm([...capturedPkm, pokemonName])
    // Update this array, by removing the selected pokemon
    setNotCapturedPkm([...notCapturedPkm.filter(pkm => pkm.id !== pokemon.id)])
    setLabel('Captured!')
}