Input field with a clear button. Can't clear the state

user_4741711 0
Viewed 567

I'm trying to make a generic Input component with a clear button but I'm having trouble with clearing the state from within the component itself when the parent is holding the state.

Setting the ref value to '' doesn't trigger the onChange event.

Don't know how to call props.onChange in the Input component since I'm using typescript in my project and onChange expects event type.

Here is a recreation of my problem https://codesandbox.io/s/vigilant-voice-rwy2ms?file=/src/App.js

Type something in the input field. Press Clear. The input field sets to empty but the state in parent is not reset.

update Some answers are recommending a clearCallbackFunction or sendind setText down to the child. The input component will be part of a component library so I don't want the parent to care about the clear function and ut would be nice to not add props to the input field.

reactjs
4 Answers

Look at this sandbox. I wouldn't recommend using useRef for this. Instead, pass the value and setter both down to the Input component. Then, the clear button can set the value to and empty string.

Input.js

const Input = (props) => {
  const handleChange = (e) => {
    props.setText(e.target.value);
  };

  return (
    <div>
      <input value={props.text} onChange={handleChange} />
      <button onClick={() => props.setText("")}>Clear</button>
    </div>
  );
};
export default Input;

App.js

import { useState } from "react";
import Input from "./Input";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Input text={text} setText={setText} />
      <p>The current state is: {text}</p>
    </div>
  );
}
user_58085040

Assuming you want your button to revert the text state back to an empty string, you'll want the onClick trigger to call the setText() function

<button type='button' onClick={() => setText('')}>Clear</button>
user_22251510

The onChange props callback can be used to clear both,

import { useRef } from "react";
const Input = (props) => {
  const ref = useRef(null);
  const handleClear = (e) => {
    props.onChange(e);
  }
  return (
    <div>
      <input ref={ref} {...props} />
      <button
        onClick={handleClear}
      >
        Clear
      </button>
    </div>
  );
};
export default Input;
user_116422620
user_108188120
Related