Làm sao để send message từ parent đến child trong reactjs

[snoobvn (cdxf)]

Mình mới học ReactJS nên cái này mình không rõ lắm.
Thông thường 1 child muốn send message đến parent thì dùng callback. Còn parent thì dùng props để initialize child. Điều này có nghĩa là props thì immutable.
Vậy mọi người cho mình hỏi là sao để parent có thể send 1 message đến client nhỉ.
Ví dụ trong cái list todo app:
<App> <TodoInput /> <TodoList /> </App>
Ở đây TodoInput có thể dùng callback để send message đến App nếu nó nhận input từ người dùng. Nhưng làm sao để từ App send messge đến TodoList thì mình đang bí. Có bạn nào giỏi react giúp mình với

[Quang_Hai (Quang Hải)]

Nếu là mình thì mình sẽ set props của TodoInput bằng state của App, khi state thay đổi thì TodoInput sẽ được update

[petehouston]

Demo: http://www.webpackbin.com/4JDACRX-M

import React, {Component} from 'react';
import {render} from 'react-dom';

const TodoInput = ({handleInput}) => <input type="text" onChange={handleInput} />
const TodoAddButton = ({text, handleClick}) => <button onClick={handleClick}>{text}</button>
const TodoList = ({todos}) => <ul>{todos.map((t) => <li>{t}</li>)}</ul> 

class App extends Component {
  constructor(props) {
     super(props)
     
     this.state = { todos: ['hello'] }
     this.onInputChanged = this.onInputChanged.bind(this);
     this.onButtonClicked = this.onButtonClicked.bind(this);
  }
  
  onInputChanged(e) {
    this.inputForm = e.target;
    this.newTodo = e.target.value;
  }
  
  onButtonClicked(e) {
    this.setState({ todos: this.state.todos.concat([this.newTodo]) });
    delete this.newTodo
    this.inputForm.value = ''
  }
  
  render() {
     return <div>
       <TodoInput handleInput={this.onInputChanged} />
       <TodoAddButton text="Add" handleClick={this.onButtonClicked} />
       <TodoList todos={this.state.todos} />
     </div>
  }
}

render(<App/>, document.querySelector('#app'))

[snoobvn (cdxf)]

Cảm ơn bác, theo như mình hiểu thì khi state của component cha thay đổi thì nó sẽ tự động render lại cả component con đúng không nhỉ, ban đầu mình không hiểu rõ về cái state và props này nên đưa ra 1 giải pháp rất ngớ ngẩn là dùng 2 lần callback ^^

class Child extends Component{
    constructor(props){
        super(props);
        this.state = {
            message: "Original Message"
        }
        this.props.callback(this.setMessage);
    }
    setMessage = (message)=>{
        this.setState({message: message})
    }
    render(){
        return(<p>{this.state.message}</p>)
    }
}
class App extends React.Component {

    constructor(props) {
        super(props);
    };
    callback = (setMessage)=>{
        this.setMessage = setMessage;
    };
    changeChildMessage =() =>{
       this.setMessage("Message Changed");
    };
    render() {
        return (
            <div onClick={this.changeChildMessage}>
                <Child callback={this.callback}/>
            </div>
        );
    }
}

[snoobvn (cdxf)]

cảm ơn bác, đúng là như vậy