Hello! above, I left the question of implementing such a component How to implement the “Save” component?.
After a little sitting, it turned out to do the following, but I don’t understand how to change the main state(or rather the product property in the state)

parent component with 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;


child component with the button:
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)}&​​gt;Like</button>
    </div>
    )
  }
}
export default Product;

2 Answers 2

likeHandler=(id)=>{
  const
    products=[...this.state.products],
    product=products.find(n=>n.id === id);

  product.saved =! product.saved;
    
  this.setState({products});
}
setState not suitable?