Passing variables inside React components issue with an onChange HTML element

Question

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>) 
    }
}