How to get value(value) of textarea of ​​child component in parent?

Question

React

There is the following application:

import React from 'react'
import ReactDOM from 'react-dom'
const url="api-url";

class MessageItem extends React.Component {
    constructor(props) {
          super(props);
          this.state = {
             value:'',
          };
        };

     handleChange(event) {
            this.setState({value: event.target.value});
         }
    render() {
    return (
      <div className="message_wrap" key={this.props.message_id}>
                                    <div className="message_body">
                                           {this.props.message_body}
                                    </div>            
                                     <div className="input-field col s12">
                                         <textarea value={this.state.value} onChange={this.handleChange.bind(this)}/>
                                         <label htmlFor="textarea1">
                                             Ответ
                                         </label>
                                    <button onClick={this.props.onClick}>
                                        Отправить
                                    </button>
                            </div>
                        </div>
    );
  }
}
class Message extends React.Component {
       constructor(props) {
          super(props);
          this.state = {
             mes:[],
          };
        };
       componentDidMount(){
        fetch(url).then(function(response){
            return response
        }).then(function (response) {
            return response.json()
        }).then((data)=>{
            this.setState({mes:data})
        })
        }
        subFunction(user_id, value) {
       /*Здесь метод отправляет ответ с телом равным значению textarea */
        }
        render() {
            return (
                <div>
                {this.state.mes.map((index)=>
                    (
                        <MesItem
                                 key={index.message_id}
                                 message_body={index.message_body}
                                 onClick={this.subFunction.bind(this, index.user_id)}
                        />

                    )
              )
                }
            </div>
            );
        }
    }

ReactDOM.render(<Message/>, document.getElementById('container'));

In short: you need to get a list of messages from some API - this happens in the Message component via fetch on the componentDidMount event. Next, a list of messages is rendered through the map through the MessageItem child component. It has a textarea response field. Its value is this.state.value. In fact, it is necessary that when you click on the Send button, you can send a response through the subFunction function, passing it the user id and the value of the response in the textarea, then the message should be removed from the mes array. If there are no problems with passing the id, then I don’t know how to pass the value of the textarea, which is located in this.state.value MessageItem . It turns out that if I transfer subFunction to MessageItem, then I lose the ability to change the mes of the parent Message (I can’t delete the message after the answer),

Answer 1

I answer myself: in the child component we change onClick={() => this.props.onClick(this.state.value)} and we get access to the value in the parent component in subFunction through value.