Truyền props sang child Component trong ReactJs

App.js

class App extends Component {
    constructor(props) {
        super(props);
        // set gia tri state  hienthifrom:false       

     this.state={
            hienthifrom:false        }
      }
    hienthibutton=()=>{
        // function khi click sẽ phủ định giá trị của hienthifrom     

      this.setState({hienthifrom:!this.state.hienthifrom})
    }
  render() {
    return (
      <div>
        <div className="jumbotron text-center">
          <h1>My First Bootstrap Page</h1>
        </div>
        <div className="container">
            {/*truyền 2 props sang component Search là Ketnoi và ShowF*/}
            {/*1 : truyền props function ()=>this.hienthibutton()*/}
            {/*2 : truyền props giá trị state this.state.hienthifrom */}
            <Search Ketnoi={()=>this.hienthibutton()} ShowF={this.state.hienthifrom}/>
          <div className="row">
            <div className="col-sm-9">
              <Table />
            </div>
            <Panel ShowF={this.state.hienthifrom}/>
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Search.js

class Search extends Component {
    constructor(props) {
        super(props);
    }
    Btuon =()=>{
        // check gia tri props ShowF ở Conponent cha là App     

        // onClick={()=>this.props.Ketnoi()}

        //gọi props ở Component cha có thuộc tính KetNoi  dạng arow function      

    if(this.props.ShowF===true){
            return (<div onClick={()=>this.props.Ketnoi()} className="btn  btn-outline-secondary">Đóng lại</div>);
        }else{
            return (<div onClick={()=>this.props.Ketnoi()} className="btn btn-outline-info">Thêm mới</div>);
        }
    }
    render() {
        return (
            <div>
            <div className="btn-group">
            <input style={{width:"765px"}} type="text" className="form-control" placeholder="Nhập từ khóa" />
              <button className="btn btn-secondary" type="button">
                <i className="fa fa-search" />
              </button>
              <hr/>

            </div>
            {this.Btuon()}
         </div>
        );
    }
}
export default Search;

Tương tự form khác check props 

PanelRender2 =()=>{
    if(this.props.ShowF===true){
        return (
            <div className="card text-left">
                <div className="card-header">Thêm mới</div>
                <div className="card-body text-primary">
                    <div className="form-group">
                        <input type="text" className="form-control" placeholder="Tên User" />
                    </div>
                    <div className="form-group">
                        <input type="text" className="form-control" placeholder="Điện thoại" />
                    </div>
                    <div className="form-group">
                        <select className="custom-select" required>
                            <option value="">Chọn quyền mặc định</option>
                            <option value="1">Admin</option>
                            <option value="2">Mod</option>
                            <option value="3">Normal</option>
                        </select>
                    </div>
                    <div className="form-group">
                        <button className="btn btn-block btn-success">Thêm sMơi</button>
                    </div>
                </div>
            </div>
        );
    }
}

demo Truyền props từ component cha sang con