ReactJS How to pass child component values to parent component

Question

I have below codes

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;

I wanted to take the input from the Chat.js and send it to Web.js and push that value to array messages and then again render that array in the this.props.children in Chat.js

But, while running the code, I am getting an error this.props.updatecommentText is not a function. Can someone please help me with this.

Answer 1

You have bind this.sendtobot twice. it should be only in constructor. like this

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

Answer 2

Your code seems to work. Here is a sandbox with your code.

I'm not sure it works as you would expect, but it works without errors.

Answer 3

By changing this 3 functions in Web component, it starting to look like a chat with only one textarea

  sendtobot(newText, i) {
    this.setState({ messages: [...this.state.messages, newText] })
  }

  eachMessage(message, i) {
    return (<p>{message}</p>);
  }

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

Answer 4

您还可以将redux用作全局状态，将子组件的状态传递给父组件。