Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 141780

How can i initialize state by passing props from parent component to child component in ReactJS?

$
0
0

I am trying to initialize state in child component (EditUser) by passing props from below parent component (App):

class App extends React.Component{
state = { name: '', city: '', company: ''};
inApp = async (name,city,company) =>{
       await this.setState({name: name, city: city, company:company});
     }
render(){
    return(

        <div className="ui container grid">
             <div className="ui row">
                 <div className="column eight wide">
                    <UserList inApp={this.inApp}/>
                 </div>
                <div className="column eight wide">
                    <EditUser sendState={this.state}/>
                </div>
            </div>
        </div>   
       ); 
    };
};

Below is the EditUser component:

class EditUser extends React.Component{
        state = {term: this.props.sendState.name, city: this.props.sendState.city, company: this.props.sendState.company};
        change = () => {
            this.props.change(this.state.term, this.state.city, this.state.company);
        }

        render(){
           return (
                <div className="ui form">

                    <h3 className="ui dividing header">Edit User</h3>
                    <div className="field">
                        <label>Name</label>
                        <input type="text" name="name"  value = {this.state.term} onChange={e=>this.setState({term:e.target.value})} placeholder={this.props.user.name}/>
                    </div>
                   <button className="ui green button" onClick={this.change}>Submit</button>                 
              </div>  
            );
        }
};
const mapStateToProps=(state)=>{

    return {
        user: state.list.SelectUser
    };
}
export default connect(mapStateToProps, {change : change})(EditUser);

I want to initialize the state in above component.
How can i do so?


Viewing all articles
Browse latest Browse all 141780

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>