1

How is the Search component being passed on to the second subcomponent? I am unable to pass an onChange of the text field from my subcomponent to my main index.js, any input appreciated. Code from two different files 

[Main]
render () {
    return (
        <div>
            <h1>Previous Logins</h1>
            <Search onSearch={this.search}/>
            <userList users={this.state.users}/>
        </div>
    )
}
_______________________________________________
onChange (e) {
    this.setState({
        term: e.target.value
    });
//console.log(this.state.term);
}

search() {
    this.props.onSearch(this.state.term);
}
[SubComponent]
render() {
    return (<div>
        Enter Username: <input value={this.state.terms} onChange={this.onChange}/>       
        <button onClick={this.search}> Login </button>
    </div>) 
    }
}
Banana
  • 2,435
  • 7
  • 34
  • 60
qxp994
  • 11
  • 1
  • What's the error are you getting? I think you need to bind the function `this.search` to use this inside it, or try calling this.search function on `onClick` like `onClick={()=>this.search()}`. – Saif Ali Khan Feb 19 '18 at 09:41
  • Also, you won't see the change using console like that since `setState` is an async process. Use `setState`s callback instead: `this.setState({...}, () => console.log(this.state.term));`. – Andy Feb 19 '18 at 09:42

0 Answers0