I can't change input value in React hooks

Question

I’m quite new to React and Hooks and trying to make contact form with hooks. I can't change my values in the field and can't type anything in the input and the onChange() is not firing. But there is no error on browser and console, so I can not figure it out. Do you know the reason?

Here is my code.


import React , {useState} from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import TextInput from './TextInput'

const FormDialog = props => {
    const {
        handleClose,
        open,
    } = props;

    const [values, setValues] = useState({
        name: "",
        email: "",
        description: ""
    });
    
    
    const handleChange = event => {
        setValues({
          ...values,
          [event.target.name]: event.target.value
        });
      };


    return(
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        >
        <DialogTitle id="alert-dialog-title">Contact Form</DialogTitle>
        <DialogContent>
            
        <TextInput 
            label={“name} multiline={false} rows={1}
            value={values.name} type={"text"} onChange={handleChange} 
        />

        <TextInput 
            label={“email”} multiline={false} rows={1}
            value={values.email} type={"email"} onChange={handleChange} 
        />

        <TextInput 
            label={“more”} multiline={false} rows={5}
            value={values.description} type={"text"} onChange={handleChange} 
        />
        </DialogContent>
        <DialogActions>
        <Button onClick={props.handleClose} color="primary">
            cancel
        </Button>
        <Button onClick={submitForm} color="primary" autoFocus>
           send
        </Button>
        </DialogActions>
      </Dialog>
    )
}

export default FormDialog

Can you please add import for all components bcoz i can't see TextInput in material UI, if it's your own please add that code too. — Prasad Phule, Sep 07 '20 at 12:31
I use these version of material ui "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/system": "^4.9.14", — via, Sep 08 '20 at 03:56

score 0 · Answer 1 · answered Sep 07 '20 at 09:01

0

You have not defined name attribute on TextInput like below..


<TextInput 
            label={“name} multiline={false} rows={1} name="name"
            value={values.name} type={"text"} onChange={handleChange} 
        />

        <TextInput 
            label={“email”} multiline={false} rows={1} name="email"
            value={values.email} type={"email"} onChange={handleChange} 
        />

answered Sep 07 '20 at 09:01

sgrmhdk

230
1
8

Thank you, I added name property for each TextInput, but still not working :( – via Sep 07 '20 at 10:59

score 0 · Answer 2 · edited May 12 '21 at 14:05

You can't spread a variable. That is, const. You're spreading the state of the input value inside the onChange function: ...values. Here you're just firing the value associated with that particular input tag. And as you want to change it dynamically, you're enclosing the e.target.name with the square brackets. And also you're not populating the state. Your just making the changes once at a time. The spread operator is used to make a copy of the previous state and then fill the array with new items. Here in the input tag, you don't do that. You just change the values once. If you want to change, you erase and enter a new one. That is the reason you don't have to spread the state.

So Re-write your code with:

setValue({ [event.target.name] : event.target.value }) inside your onChange function

Have a nice day.

I can't change input value in React hooks

2 Answers2