CODEWITHSUNDEEP
reactjsaxiosmaterial-uireact-hooks
Emm
Emm

Reputation: 321

I can't write in the TextFields

I am trying to add a new user to my database using the axios post method, with a form that I made with material ui, the application runs well does not mark me any console errors or in the browser and if it shows me the form but I can't write the TextFields.

Before adding the functions, I could write well but after adding Onchange and value I no longer let myself write

What could be happening?

Component 

import React, { useState } from "react"; 
import  axios  from 'axios';

//useState hook create a state named user with initial state set to an object with name, lastname and age properties set to empty strings

function UserAdd(props) {
  const initialState = { name: '', lastname: '', age:0 }

  const [user, setUser] = useState(initialState) 

  function handleChange(event) { 
    setUser({...user, [event.target.name]: event.target.value})
  }

  function handleSubmit(event) { 
    event.preventDefault();  
    if(!user.name || !user.lastname || !user.age) return 
    async function postUser() {
      try {
        const response = await post('/api/addUser', user); 
        props.history.push(`/user/${response.data._id}`);  
      } catch(error) {
        console.log('error', error);
      }
    }
    postUser();
  }

  function handleCancel() {
    props.history.push("/users");
  }

  return ( 
        <div style={{ padding: 16, margin: 'auto', maxWidth: 1000 }}> 
    <Typography variant="h4" align="center" component="h1" gutterBottom>
    Add User
  </Typography>
    <form onSubmit={handleSubmit} className={classes.container} >
      <TextField
        label="Name"
        className={classes.textField}
        value={user.name}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        id="filled-read-only-input"
        label="Lastname "
        className={classes.textField}
        value={user.lastname}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />
      <TextField
        required
        id="filled-required"
        label="Age"
        className={classes.textField}
        value={user.age}
        onChange={handleChange}
        margin="normal"
        variant="outlined"
      />

      <Grid item style={{ marginTop: 30 }}>
        <Button
            variant="contained"
            color="primary"
            type="submit">
                  Add
        </Button>
      </Grid>
      <Grid item style={{ marginTop: 30 }}>
        <Button
            onClick={handleCancel}
            variant="contained"
            type="cancel">
                  Cancel
        </Button>
      </Grid>
    </form>
    </div>
  );
}

export default UserAdd;```

Upvotes: 0

Views: 887

Answers (1)

Nick
Nick

Reputation: 16576

It looks like you need to have a name attribute to pass with event.target.name. Not sure what props TextField takes, but I assume it would be something like this:

<TextField
  name="name" // Add this
  label="Name"
  className={classes.textField}
  value={user.name}
  onChange={handleChange}
  margin="normal"
  variant="outlined"
/>

Similarly, you'd need to have a name prop for the other input components.

Upvotes: 1

Related Questions