This is a react project that uses an API to create a card which presents a Github users information. At the moment I am implementing a delete button on each card that would delete that specific card. You can try the application on code sandbox by clicking here.. Instructions how to use: enter any 'Github' username into the input and click add card.
Once you click on add card, the user information is extracted into a Card which is then stored under CardList. This has an identifiable by key. But when clicking on Delete, instead of deleting the corresponding card to where the delete button is pressed, currently all the cards are deleted. (I have excluded the form component to make it easier to read).
Not sure if I am incorrectly using splice or not correctly declaring the cards key?
function App() {
const [cards, setCards] = useState([]);
const addNewCard = cardInfo => {
setCards(cards.concat(cardInfo));
};
const removeCard = key => {
setCards(cards.splice(key, 0))
}
return (
<div>
<Form onSubmit={addNewCard} />
<CardList
cards={cards}
handleClick={removeCard}
/>
</div>
);
}
const CardList = props => (
<div>
{props.cards.map((card, index) => (
<Card {...card} key={index} handleClick={props.handleClick} />
))}
</div>
);
const Card = props => {
return (
<div style={{ margin: "1em" }}>
<img alt="avatar" style={{ width: "70px" }} src={props.avatar_url} />
<div>
<div style={{ fontWeight: "bold" }}>{props.name}</div>
<div>{props.blog}</div>
<a href={props.html_url}>{props.html_url}</a>
<button onClick={props.handleClick}>Delete</button>
</div>
</div>
);
};
Rémi Girard :
To be exact you incorretly use splice in the context of hooks. Check here to know how splice works\n\nThe splice() method adds/removes items to/from an array, and returns the removed item(s).\n\nSo you are setting the element you try to remove to your variable. To keep your original logic, I suggest you use a temp variable like this:\nconst removeCard = key => {\n let tempCards = cards;\n const removedCard = tempCards.splice(key, 0); // you can use the removed card if needed\n setCards(tempCards);\n}\n\nAnd the parameter key is not defined you have to pass this parameter to your function see the documentation :\nFor just minor change from your code, you can change this:\n <Card {...card} key={index} handleClick={props.handleClick} />\n\nto this:\n <Card {...card} key={index} handleClick={() => props.handleClick(index)} />\n\nEDIT: When you use concat maybe, it's adding each element of your new card. Try to change this :\n setCards(cards.concat(cardInfo));\n\nto this:\nsetCards(cards.push(cardInfo));\n",
2020-06-21T16:04:09