How to change specific item button name by clicking the button in ReactJs?

Question

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?

Manjiri Bangali · Accepted Answer · 2022-03-26 15:20:37Z

2

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.

answered Mar 26, 2022 at 15:20

Manjiri Bangali

314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsN00b · Accepted Answer · 2022-03-26 16:00:26Z

1

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.

answered Mar 26, 2022 at 16:00

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

2 Comments

stmp_lee Over a year ago

Thank you for your effort. But I have another function called click(index) that was for storing data on local storage, if I try to do the same task as click(index) in handleClick() it doesn't work. Any suggestion on how I can solve this problem?

jsN00b Over a year ago

Yes, can be done like so (within handleClick):

localStorage.setItem('items', JSON.stringify(posts.filter(({_id}) => (_id === id || ([_id] in isFavorite && isFavorite[_id])))));

. Please add this just below: const id = e.target.id;. However, why do you need to update local-storage each & every time user selects/de-selects. It may be better to update it once the user confirms their choice.

Collectives™ on Stack Overflow

How to change specific item button name by clicking the button in ReactJs?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related