I have a react component which encapsulates two child components. One of these child components contains an input field and a button. On a click of the button, I want to send the contents of the input field to the parent component for further action.
Here is what I have so far:
Parent component:
//WorldTimeDate.js
import React from "react";
import SearchWorldTimeDate from "./SearchWorldTimeDate.js";
import Style from "./WorldTimeDate.less";
export default class WorldTimeDate extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div className={Style.WorldTimeDate}>
                <SearchWorldTimeDate />
            </div>
        )
    }
}
Child component:
import React from "react";
import Style from "./SearchWorldTimeDate.less";
export default class SearchWorldTimeDate extends React.Component {
    constructor() {
        super();
        this.state = {
            inputValue: ""
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    searchClick() {
        console.log(this.state.inputValue);
    }
    handleInputChange(event) {
        this.setState({inputValue: event.target.value});
    }
    render() {
        return (
            <div className={Style.SearchWorldTimeDate}>
                <input onChange={this.handleInputChange} />
                <button onClick={ () => this.searchClick()}>Go</button>
            </div>
        )
    }
}
You can see that, so far, I am updating the inputValue state of my child component on update of the search field, and the searchClick function is triggered when the button is clicked.
I know need to send this inputValue back up to the parent class. How can I do this?
 
    