I have multiple item cards on a page, I want to change only a specific item/card button " Add Favt" to "Remove Favt" when the user clicks on the "Add Favt" button. But in my case, all of the card button names change when clicked on only one card button.
Here is my approach:
const Listitem = ({ posts }) => {
const [btn, setBtn] = useState('Add Favt');
var arr = [];
const click = (index) => {
arr.push(posts[index]);
console.log(arr);
localStorage.setItem('items', JSON.stringify({ arr }));
if (btn === 'Add Favt') {
setBtn('Remove Favt');
} else {
setBtn('Add Favt');
}
};
return (
<div className="fav-content">
<ul className="card">
{posts.map((item, index) => {
console.log(item._id);
return (
<li key={item._id}>
<button onClick={() => click(index)}>{btn}</button>
<div className="post">
<h1>Name: {item.name}</h1>
<p>Bio: {item.bio}</p>
<a href={item.link}>Link: {item.link}</a>
</div>
</li>
);
})}
</ul>
</div>
);
};
How to solve this problem?
You are using btn state variable for each button. setting btn in state will reflect in all of them. Make a separate component for this.
<button onClick={() => click(index)}>{btn}</button>
<div className="post">
<h1>Name: {item.name}</h1>
<p>Bio: {item.bio}</p>
<a href={item.link}>Link: {item.link}</a>
</div>
Maintain a local state in new component for status of individual item.
This may be one possible solution to achieve the desired objective.
Code Snippet
Please view the snippet in Full Page
const {useState} = React;
const Listitem = ({posts, ...props}) => {
// track whether each card is is favorite or not
const [isFavorite, setIsFavorite] = useState({});
// when button clicked, flip card from favorite
const handleClick = e => {
const id = e.target.id;
setIsFavorite(prev => ({
...prev,
[id]: !prev[id]
}))
};
return (
<div className="fav-content">
List of favorites: {
posts
.filter(({_id}) => [_id] in isFavorite && isFavorite[_id])
.map(({name}) => name)
.join()
}
<ul className="card">
{posts.map(item => (
<li key={item._id}>
<button
id={item._id}
onClick={handleClick}
>
{
isFavorite[item._id]
? 'Remove Fav'
: 'Add Fav'
} {item.name}
</button>
<div className="post">
<h4>Name: {item.name}</h4>
<p>Bio: {item.bio}</p>
<a href={item.link}>Link: {item.link}</a>
</div>
</li>
)
)}
</ul>
</div>
);
};
const itemsList = [
{_id: 1, name: 'item 1', bio: 'bio 1', link: 'link 1'},
{_id: 2, name: 'item 2', bio: 'bio 2', link: 'link 2'},
{_id: 3, name: 'item 3', bio: 'bio 3', link: 'link 3'},
{_id: 4, name: 'item 4', bio: 'bio 4', link: 'link 4'},
];
ReactDOM.render(
<div>
DEMO
<Listitem posts={[...itemsList]}/>
</div>,
document.getElementById("rd")
);.fav-content { width: fit-content; padding: 5px 15px; }
.card { background-color: #DDDDFF; margin: 5px 15px; }
.post { background-color: #FFFFDD; margin: 5px 15px; }<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Explanation
Inline comments have been provided in the above code snippet.