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?