Как пробросить данные в State?

Question

[faleaksey]

Всем привет! выше я оставлял вопрос о реализации такого компонента Как реализовать компонент «Сохранить»? .
Немного посидев, получилось сделать следующие, но до конца не понимаю как изменять главный state(а точнее свойство продукта в state)

родительский компонент с state:

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import Product from '../../components/Product/Product';



class MainPage extends Component {
  state = {
    savedProducts: [],
    products: [
      {
        id: 1,
        title: 'Product One',
        saved: false
      },
      {
        id: 2,
        title: 'Product Two',
        saved: true
      },
      {
        id: 3,
        title: 'Product Three',
        saved: false
      }
    ]

  };

  likeHandler = (id) => {
    console.log(id);
    const idProduct = this.state.products[id - 1].saved;
    console.log(idProduct);

  }
  renderProduct() {
    return this.state.products.map((info, index) => {
      return (
        <Product
          key={index}
          inform={info}
          id={info.id}
          saved={info.saved}
          likeToggle={this.likeHandler}
          />
      )
    })
  }
  render() {
    return (
      <div>
        {this.renderProduct()}
      </div>
    )
  }
}

export default MainPage;

дочерний компонент с кнопкой:

import React, { Component } from 'react';



class Product extends Component {

  render() {
    return (
      <div>
        {this.props.inform.title}


        <button
          className={this.props.saved ? 'like-button liked' : 'like-button'}
          onClick={() => this.props.likeToggle(this.props.id)}>Like</button>
      </div>
    )
  }
}
export default Product;

Answer 1

[0xD34F]

likeHandler = (id) => {
  this.setState(({ products }) => ({
    products: products.map(n => n.id === id
      ? { ...n, saved: !n.saved }
      : n
    ),
  }));
}

Answer 2

[alexhovansky]

setState не подходит?