При клике на одну кнопку меняется состояние у всех других?

Question

[Иван]

Не совсем понимаю, что я могу сделать, чтобы при клике менялось состояние только у той кнопки, на которой был клик произведён?
это родительский компонент:

import React, { Component } from "react";
import CardMovie from "../cardMovie/CardMovie";

const defaultMovies = [
  {
    Title: "Звёздные войны"
  },
  {
    Title: "Звёздный десант"
  }
];

class HomePage extends Component {
  render() {
    console.log(this.state);
    if (defaultMovies.length > 0) {
      return (
        <div className="container">
          <ul className="list-movies">
            {defaultMovies.map(film => {
              return (
                <li>
                  <h2>{film.Title}</h2>
                  <CardMovie />
                </li>
              );
            })}
          </ul>
        </div>
      );
    }
    return (
      <div className="container">
        <h1>Hello world</h1>
      </div>
    );
  }
}

export default HomePage;

А это два компонента кнопки:

import React, { Component } from "react";
import { connect } from "react-redux"; // связывает стейт со стором
import { toggleButtonWatched } from "../../store/actions/actions";

class AddToWatched extends Component {
  render() {
    return (
      <React.Fragment>
        <button type="button" name="AddToWatched" onClick={this.props.isToggle}>
          {this.props.bool
            ? "Добавить в просмотренные"
            : "Убрать из просмотренного"}
        </button>
      </React.Fragment>
    );
  }
}

function mapStateToProps(state) {
  return {
    bool: state.toggleButton.boolWatched
  };
}

function mapDispatchToProps(dispatch) {
  return {
    isToggle: () => dispatch(toggleButtonWatched())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AddToWatched);

import React, { Component } from "react";
import { connect } from "react-redux"; // связывает стейт со стором
import { toggleButtonFavorite } from "../../store/actions/actions";

class AddToFavorite extends Component {
  render() {
    return (
      <React.Fragment>
        <button
          type="button"
          name="AddToFavorite"
          onClick={this.props.isToggle}
        >
          {this.props.bool ? "Добавить в избранное" : "Убрать из избранных"}
        </button>
      </React.Fragment>
    );
  }
}

function mapStateToProps(state) {
  return {
    bool: state.toggleButton.boolFavorite
  };
}

function mapDispatchToProps(dispatch) {
  return {
    isToggle: () => dispatch(toggleButtonFavorite())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AddToFavorite);

у redux тоже код простой

import { combineReducers } from "redux";
import { toggleButton } from "./buttonReducer";

export default combineReducers({
  toggleButton
});

import { CHANGE_FAVORITE, CHANGE_WATCHED } from "./actionsTypes";

export function toggleButtonFavorite() {
  return {
    type: CHANGE_FAVORITE,
  };
}

export function toggleButtonWatched() {
  return {
    type: CHANGE_WATCHED,
  };
}


import { CHANGE_FAVORITE, CHANGE_WATCHED } from "../actions/actionsTypes";

const initialState = {
  boolWatched: true,
  boolFavorite: true
};

export function toggleButton(state = initialState, action) {
  switch (action.type) {
    case CHANGE_WATCHED:
      return {
        boolWatched: !state.boolWatched,
        boolFavorite: state.boolFavorite
      };
    case CHANGE_FAVORITE:
      return {
        boolWatched: state.boolWatched,
        boolFavorite: !state.boolFavorite
      };
    default:
      return state;
  }
}

Comments

[Wondermarin]

Не совсем понятен ваш вопрос

[Иван]

Wondermarin, создаётся два контейнера с фильмами. У каждого контейнера по две кнопки, добавить в избранное и добавить в просмотренные, если я на одну из кнопок нажму, то значение (текст на кнопке) поменяется у обеих кнопок