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

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?

CodePudding user response：

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.

CodePudding user response：

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.