Im trying to get values from Inputs in REACTJS but the result gets empty

Question

import React,{useState} from 'react'
const initialState = { nombre: "" ,apellidos: "" ,email: "" ,contrasena: "" ,repetirContrasena: "" };

enter code here

    const handleSubmit=(e)=>{
     e.preventDefault();

      console.log(formData);
};

    const handleChange = (e) =>{ 
setFormData({ ...formData,[e.target.name]: e.target.value});
};
return(
<form className={classes.form} onSubmit={handleSubmit}>
                <Grid container spacing={2}>
                    {isSignup &&(
                            <>
                            <Input name="nombre" type="text" label="Nombre" handleChange={handleChange} autoFocus medio />
                            <Input name="apellidos" type="text" label="Apellidos" handleChange={handleChange}  medio />
                            </>
                        )} 
                <Input name="email" label="Email" handleChange={handleChange} type="email" />
                <Input name="contrasena" label="Contrasena" handleChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />
                { isSignup && <Input name="repetirContrasena" label="Repetir Contrasena" handleChange={handleChange} type="password" />}
                </Grid>

This is the result.

{nombre: "", apellidos: "", email: "", contrasena: "", repetirContrasena: "", …}
**"": "123"

apellidos: "" contrasena: "" email: "" nombre: "" repetirContrasena: "" proto: Object** Error image

I tried using onChange={handleChange},onInput={handleChange} instead handleChange={handleChange} but the result gets completly empty.

you forgot to bind a ```value``` attribute to the inputs & you need to use the ```onChange``` attribute, example : `````` — VersifiXion, Jun 27 '21 at 17:13
Yes, I also tried adding value={formData.nombre} or value={initialState.nombre} and changing handleChange to onChange or onInput but I get the same result — Ander Canales Medina, Jun 27 '21 at 17:24

MKod · Answer 1 · 2021-06-27T18:38:27.370

As @VersifiXion pointed out you can use onChange attribute and value attribute for input tag. Note, useState wont' immediately update your state and it is always good to use prevState while updating state and it can be something like below -

const handleChange = (event) =>{
   // setFormData({ ...formData,[event.target.name]: event.target.value});
    setFormData( (prevFormDataState) => {
        let myPrevSate = {...prevFormDataState};
        return {
            ...myPrevSate,
            [event.target.name]: event.target.value
        }
    })
};

And inputtag element can be written something like this -

<Input
                name="email"
                label="Email"
                value={formData.email}
                onChange={handleChange} type="email" />

Also, please look into this useful comment added by @pilchard

score 0 · Answer 2 · answered Jun 29 '21 at 02:48

I created a file called Input to set attributes to INPUTS so I used nombre={name} instead name={name}. Sry im novice

export const Input = ({name,handleChange,label,autoFocus,type,handleShowPassword,medio}) => {
return (
   <Grid item xs={12} sm={medio ? 6 : 12}>
       <TextField 
       name={name}
       onChange={handleChange}
       variant="outlined"
       required
       fullWidth
       label={label}
       autoFocus={autoFocus}
       type={type}
       InputProps={name === "contrasena" ? {
           endAdornment:(
               <InputAdornment position ="end">
                   <IconButton onClick={handleShowPassword}>
                    {type==="contrasena" ? <Visibility /> : <VisibilityOff />}
                   </IconButton>
               </InputAdornment>
           )
       }:null}
       />
   </Grid>
)

} export default Input;

Im trying to get values from Inputs in REACTJS but the result gets empty

2 Answers2