ReactJS Как передать значения дочернего компонента родительскому компоненту

У меня есть коды ниже

chat.js

import React from 'react';
import '../styles/Chat.css';
import Web from '../services/Web';

class Chat extends React.Component {

 constructor(props) {
    super(props);

    this.state = {
        msg:''
    };
    this.sendMessage = this.sendMessage.bind(this);
 }

 sendMessage () {
    this.props.updatecommentText(this.refs.newText.value, this.props.index);
    this.setState({ msg: '' });
 }

 render() {
   return (
     <div className = "Chat-container">
      <div className = "Chat-row">
        <div className = "Chat-column">
          <div className = "Chat-card">
            <div className = "Chat-body">
               <div className = "Chat-title">React Based Chatbot</div>
               <div className = "Chat-messages">
                 { this.props.children } 
           </div>
           </div>
            <div className = "Chat-footer">
                  <textarea className = "Chat-input" ref = "newText"></textarea>
                  <button className = "Chat-submit" onClick = {this.sendMessage} defaultValue = { this.props.children }>Send</button>
            </div>
          </div>
        </div>
      </div>
     </div>
   );
 }
}


export default Chat;

Web.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import Chat from '../components/Chat';

class Web extends React.Component {

   constructor(props){
      super(props);

      this.state = {
         messages:["Hi, How can I help you ?"
         ]
      };
      this.sendtobot = this.sendtobot.bind(this);
  }

  sendtobot(newText, i){
     var arr = this.state.messages
     arr.push(newText)
     this.setState({messages: arr})
  }

  eachMessage(message, i){
        return (<Chat key = {i} index = {i} updatecommentText = { this.sendtobot.bind(this) }>{ message }</Chat>);
  }

  render(){
     return(
       <div>
         {this.state.messages.map(this.eachMessage.bind(this))}
       </div>
     )
  }

}

export default Web;

Я хотел взять входные данные из Chat.js и отправить их в Web.js и поместить это значение в сообщения массива, а затем снова отобразить этот массив в this.props.children в Chat.js

Но при запуске кода я получаю сообщение об ошибке this.props.updatecommentText is not a function.. Может кто-нибудь помочь мне с этим.