React input doesn't type

Question

I'm trying to use React Bootstrap Form but I couldn't tape into the input and I deciced to try with the classic default one but it doesn't work as well(just if I paste something in). In the sandbox works perfectly but when I copy it in my page it doesn't.

import React, { Fragment, useState } from "react"

const StandAdd = () => {
  const [test, setTest] = useState("")

  const handleChange = event => {
    event.preventDefault()
    setTest(event.target.value)
  }

  const handleSubmit = event => {
    alert("A name was submitted: " + test)
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={test} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  )
}

export default StandAdd

Sandbox link https://codesandbox.io/s/react-input-vb2o1?file=/src/App.js

Any idea?

Can you share the code that you have used in your real application? — Maniraj Murugan
– Maniraj Murugan, Commented Jun 23, 2020 at 10:16
The CodeSandbox example works just fine - impossible to help without knowing what's going on in your actual app. Perhaps you're missing those onChange handlers from some of your input fields in your actual code. — goto
– goto, Commented Jun 23, 2020 at 10:17
Everything looks fine in the sample, standard approach would be restarting your app and if that doesnt help delete node_modules and reinstall whole thing. — Jacek Walasik
– Jacek Walasik, Commented Jun 23, 2020 at 10:25
Is this your component exactly? Because it does work just fine, although you don't need the event.preventDefault() in the handleChange event handler. — goto
– goto, Commented Jun 23, 2020 at 12:18

Joe Lloyd · Accepted Answer · 2020-06-23 10:20:40Z

1

Your state is undefined and there for uncontrolled

You just need a default value as part of your state.

const [test, setTest] = useState('');

This happens because your initial value of test is undefined. This is the same as removing that prop. So you need to make sure the value is at least an empty string.

edited Jun 23, 2020 at 10:20

answered Jun 23, 2020 at 10:18

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

goto Over a year ago

Although the default value is missing, it still works and it's not preventing you from typing things into the input field, which is what OP seems to be having issues with.

Marco Disco Over a year ago

thanks but it doesn't work. the example has none and works

Collectives™ on Stack Overflow

React input doesn't type

1 Answer 1

Your state is undefined and there for uncontrolled

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your state is undefined and there for uncontrolled

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related