Q:

Reactjs parent state is not refreshed when the children input is changed

I created a component and wanted to wrap text input and add some functionality to it. 
<Input value={this.state.name} />

In child component there is remove button beside text input in order to clear text when it is clicked.
  const Input = (props) => {
    let textInput = null;
      const removeText = (e) =>{
        e.preventDefault();
        textInput.value = '';
        textInput.focus();
      }
       return(<div>
              <input ref={(input) => { textInput = input; }} {...props} />
              <button
                  onClick = {removeText}
               ></button>
              </div>)
    }

As the Input component is function, I used ref in order to access input and manipulate it. The problem is the parent state is not updated when it is changed by functions in child component. Consider that I don't want to use props and pass the function to update parent state. By the way, I don't know this approach whether is correct or not.

A:

Define removeText function in a component where you are calling Input component. Also avoid using refs for input field you no need ref for sure instead you can have event handler function which will set the value in state
      removeText = (e) =>{
           e.preventDefault();
           this.setState({name: ''});
      }

     handleInput = e => {
         this.setState({name: e.target.value});
     }

And pass down functions to Input component as a prop like
    <Input value={this.state.name} removeText={this.removeText} handleInput={this.handleInput} />

Now, change the Input component to something like below
   const Input = (props) => {
        return(<div>
          <input value={props.value} onChange={e => props.handleInput(e)}/>
          <button
              onClick = {() => this.removeText()}
           ></button>
          </div>)
   }

This way it updates the parent state value. This is so called callbacks in react

