React Controlled Component

controlled.tsx

  function handleInput(input: string) {
    setKeyword(input)
    if (input) {
      props.onChange(input);
    } else {
      props.onChange('')
    }
  } 

<Fragment>
      <input type="text" style={{ padding: '1px 2px', height: 'fit-content' }} value={keyword} onChange={(event) => handleInput(event.target.value.trim().toLowerCase())} placeholder={props.text} />
      <span className="clear" onClick={() => {
        props.onChange('');
        setKeyword('');
        dispatch(isSorted(false));
      }}>Clear</span>
    </Fragment>