How to send state data from Child to Parent in React

Question

I know, there are a lot if questions on this topic, but i am beginner in react, so i couldn't do what i want.

So, i have a component (child) where i work with state's fields, change it and then i need to send it to Parent.

//Child
import React from "react";
import { Component } from "react";

import "./post-buttons.css";

class PostButtons extends Component {
  constructor(props) {
    super(props);
    this.state = {
      important: false, //this value i want to send to a Parent Component
      like: false, //this value i want to send to a Parent Component
    };

    this.onImportant = this.onImportant.bind(this); //Привязка контекста,т.к он теряется (внутри render событие onclick)
    this.onLike = this.onLike.bind(this);
  }

  onImportant() {
    this.setState(({ important }) => ({
      important: !important, //this value i want to send to a Parent Component
    }));
  }

  onLike() {
    this.setState(({ like }) => ({
      like: !like, //this value i want to send to a Parent Component
    }));
  }

  render() {
    return (
      <>
        <button
          type="button"
          className="btn-star btn-sm"
          onClick={this.onImportant}
        >
          <i className="fa fa-star"></i>
        </button>
        <button type="button" className="btn-trash btn-sm">
          <i className="fa fa-trash-o"></i>
        </button>
        <i className="fa fa-heart" onClick={this.onLike}></i>
      </>
    );
  }
}

export default PostButtons;

Here is a Parent:

//Parent
import React, { Component } from "react";
import PostButtons from "../post-buttons";

import "./post-list-item.css";

export default class PostListItem extends Component {
  render() {
    const { label } = this.props;

    let classNames = "app-list-item d-flex justify-content-between";

    //here i use 'important' and 'like' from child component.

    /*if (important) {
      classNames += " important";
    }
    if (like) {
      classNames += " like";
    }*/

    return (
      <div className={classNames}>
        <span className="app-list-item-label">{label}</span>
        <div className="d-flex justify-content-center align-items-center">
          <PostButtons></PostButtons>
        </div>
      </div>
    );
  }
}

P.S sorry for question, i really couldn't understand answers on same questions.

How to send state data from Child to Parent in React

0 Answers0