How does react pass data to the parent component presentation in the child component?

how does react pass data to the parent component presentation in the child component? is not just about displaying data, is there any way to pass it to ?

parent

import React, { Component } from "react";
import Children from "./Children";
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="" child={this.childs()}></Children>
      </div>
        );
  }
}


export default Father;

sub

import React, { Component } from "react";
class Children extends Component{
    render(){
        let str = "";
        return (
            <div className="child">
                {str}
               {this.props.name}
            </div>
        )
    }
}
export default Children;
Oct.27,2021

the child component passes parameters to the parent component in a way that uses event callbacks. On this basis, it is recommended to read more documents!

import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="" childs={this.childs} fun={this.fun}></Children>
      </div>
        );
  }
}

export default Father;
import React, { Component } from 'react';
class Children extends Component{
    giveFather=()=>{
        const value=''
        this.props.childs(value)
    }
    render(){
        let str = "";
        return (
            <div className="child">
                {str}
               {this.props.name}
               <button onClick={this.props.giveFather}>button</button>
            </div>
        )
    }
}
export default Children;
Menu