I'm using React with TypeScript and I'm working on building a Todo app. To start, I was setting up an input that changes a state value when it changes. Pretty simple, I've done before. However, this time I'm getting the following error:

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

This error makes perfect sense, I need to add an onChange handler to my input field. However, I do have an onChange handler set.

My code so far:

My main app file

import Input from './components/Input';
import './App.css';

const App = () => {
  type Todo = {
    completed: boolean,
    value: string
  };
  // state variables
  // mode for establish light mode or dark mode
  const [theme, setTheme] = useState('dark');
  const [value, setValue] = useState('banana');

  // images for mode switch
  const sunIcon = './images/icon-sun.svg';
  const moonIcon = './images/icon-moon.svg';
  let icon: string;
  if(theme === 'light'){icon = sunIcon}
  else{icon = moonIcon};

  const iconClick = () => {
    if(theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  }

  const handleKeyPress = (e: any) => {
    if (e.which === 13) {
      console.log('enter pressed')
    }
  }

  const handleChange = (e:any) => {
    setValue(e.target.value);
  }

  return(
    <div className='app' data-theme={theme}>
    <main>
      <header>
        <h1 className='title'>TODO</h1>
        <img src={icon} alt='color theme switch' onClick={iconClick} className='icon' />
      </header>
      <Input onKeyPress={handleKeyPress} value={value} onChange={handleChange} />
      {/* I pass both value and onChange through props */}
    </main>
    <footer>

    </footer>
    </div>
  )
}

export default App;

My Input component

    return(
        <div className='todoContainer'>
            <div className='checkBubble' />
            <input 
                type='text' 
                placeholder='Create a new todo' 
                className='input' 
                onKeyPress={props.onKeyPress}  
                value={props.value}
                onChange={props.handleChange}
                // I have both the value and onChange passed in through props
            />
        </div>
    )
}

export default Input;

I'm sure the solution is simple and I'm just not seeing it. Thanks!

CodePudding user response：

You are passing handleChange to input with the name as onChange so you have to access it with the name onChange

onChange={props.onChange}

CodePudding user response：

The simplest fix is to set the value as value || ""

for the input.

So value={props.value || ""} should get rid of the error

Hope it solves the issue.