update state child from parent's onClick on reactjs

Question

I have a simple CRUD with React, I use bootstrap modal for adding the item, updating and dropping. to do that, I create parent component called country.js for listing country. then I create modal.js for adding and updating item.

in this case, my onClick button in parent component, I want to fill input by props data from the parent by passing it to the child component. it is possible if I update child state by the onClick event in the parent?

country.js

getRow(res){   //console.log(res)
        this.setState({
            rowId: res.country_id,
            country_id: res.country_id,
            country: res.country
        })
    }

    render(){
        return (
            <div>
                <div>
                    <div id="page-wrapper">
                        <div className="row">
                            <div className="col-lg-12">
                                <h1 className="page-header">Master Data</h1>
                            </div>
                        </div>
                        <div className="col-lg-12">
                            <div className="panel panel-default">
                                <div className="panel-heading">
                                    Country
                                    <button type="button" 
                                        data-toggle="modal" data-target="#getModal" 
                                        className="btn btn-primary pull-right">Add
                                    </button>
                                </div>
                                <div className="panel-body">
                                    <div className="table-responsive">
                                        <table className="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Country Name</th>
                                                <th>Last Update</th>
                                                <th style={{width: '170px'}}>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {this.state.data.map(res =>
                                                <tr key={res.country_id}>
                                                    <td>{res.country_id}</td>
                                                    <td>{res.country}</td>
                                                    <td>{res.last_update}</td>
                                                    <td>
                                                        <button type="button" 
                                                            onClick={(e) => this.getRow(res)} 
                                                            className="btn btn-info"
                                                            data-toggle="modal" data-target="#getModal">Update
                                                        </button>
                                                        <button type="button" 
                                                            onClick={(e) => this.getRow(res)} 
                                                            className="btn btn-danger"
                                                            data-toggle="modal" data-target="#getModalDelete">
                                                            Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                            )}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>  
                <Modal dataBind={this.state} addHandler={this.addHandler} handleClearForm={this.handleClearForm} />
                <DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
            </div>    
        )
    }

modal.js

render(){ 
    return (
        <div className="modal fade" id="getModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" id="closeModal" onClick={this.handleClearForm} className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 className="modal-title" id="myModalLabel">Add Data {this.props.dataBind.rowId}</h4>
                    </div>
                    <form onSubmit={this.handleSubmit} >
                        <div className="modal-body">
                            <div className="form-group">
                                <label>Country Id</label>
                                <input type="text" className="form-control" 
                                    onChange={this.logChange} 
                                    value={this.state.country_id} 
                                    placeholder={this.props.dataBind.country_id}
                                    name="country_id" />
                            </div> 
                            <div className="form-group">
                                <label>Country Name</label>
                                <input type="text" className="form-control" 
                                    onChange={this.logChange} 
                                    value={this.state.country} 
                                    placeholder={this.props.dataBind.country}
                                    name="country" />
                            </div>      
                        </div>
                        <div className="modal-footer">
                            <button 
                                type="button" className="btn btn-default" 
                                onClick={this.handleClearForm} data-dismiss="modal">
                                Close
                            </button>
                            <button 
                                type="submit" className="btn btn-primary">
                                Save changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

thx for your help :)

Manoz Manoz · Accepted Answer · 2018-04-25T04:47:52

When you update a state in parent component it will not reflect in child components until you use componentWillReceiveProps(props).

Bascially componentWillReceiveProps(props) keeps track whenever the state is changed.

So when you do

 <DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />

This will only bind state which were set at initial render().

Solution

In you Modal class create a method of React Lifecycle as

componentWillReceiveProps(props){
   console.log(props.rowId) //this will get whenever state changes after initial render
}

See more on componentWillReceiveProps()

update state child from parent's onClick on reactjs

2 Answers