class Main extends React.Component {
constructor() {
super();
this.state = {
searchQuery: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
this.setState({
searchQuery: e.target.value
});
}
render() {
return (
<div>
<Search
searchQuery={this.state.searchQuery}
handleChange={this.handleChange} />
<Results />
</div>
);
}
}
class Search extends React.Component {
render() {
return (
<div>
<input
type="text"
value={this.props.searchQuery}
onChange={this.props.handleChange} />
<button>Send</button>
</div>
);
}
}
class Results extends React.Component {
render() {
return (
<ul>
<ResultItem />
</ul>
);
}
}
class ResultItem extends React.Component {
render() {
return (
<li>Doctor No</li>
);
}
}
ReactDOM.render(<Main />, document.getElementById('root'));