Мне не хватает идентификатора ключа для кнопки React onClick

Question

Когда я нажимаю на избранную кнопку рядом с элементом списка, она меняет все цвета на синий вместо одной «любимой» кнопки. Я знаю, что мне не хватает ключевого идентификатора для функции кнопки - но я не могу понять это

import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

class MyStories extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      button: false
    };
    this.addFavorite = this.addFavorite.bind(this);
  }

  addFavorite = e => {
    this.setState({
      button: true
    });
  };

  render() {
    return this.props.stories.map(t => (
      <div className="menu-inner-container">
        <p key={t.id}>
          <Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
          <button
            key={t.id}
            className={this.state.button ? "buttonTrue" : "buttonFalse"}
            onClick={this.addFavorite}
          >
            Favorites
          </button>
        </p>
      </div>
    ));
  }
}

//refactor - create a button that will allow for us to mark which our favorites are
const mapStateToProps = state => {
  return {
    stories: state.myStories
  };
};

export default connect(mapStateToProps)(MyStories);

Answer 1

Изменить это jsx

    <button key={ t.id } 
    className={this.state.button===t.id ? "buttonTrue": "buttonFalse"} 
    onClick={()=> this.addFavorite(t.id)}>Favorites</button>

функция addFavorite

addFavorite = (id) => {
  this.setState({button: id})
}

Answer 2

вместо логического значения кнопки, используйте идентификатор нажатой кнопки. <button key={ t.id } className={this.state.button === t.id ? "buttonTrue": "buttonFalse"} onClick={ (event) => this.addFavorite(event, t.id) }>Favorites</button>

addFavorite = (e, id) => { this.setState({ button: id }) `конструктор (реквизит) {супер (реквизит);

this.state = {
  button: ''
}
this.addFavorite = this.addFavorite.bind(this);

}

`