0

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?

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
JavascriptLoser
  • 1,853
  • 5
  • 34
  • 61

0 Answers0