My form is not capturing the inputs. My code looks correct to me after following this thread. This is what I have:

import { NavLink, useNavigate } from "react-router-dom";
import { useState } from 'react';
import { Card, Row, Col, Container, Form, Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function Signup({setUser}) {
  const navigate = useNavigate();

  const [ formData, setFormData ] = useState({
    username: '',
    email: '',
    password: ''
})
const [ errors, setErrors ] = useState([])

function handleChange(e) {
    const key = e.target.name;
    const value = e.target.value;
    setFormData({...formData, [key]: value})
}

function handleSubmit(e) {
    e.preventDefault();
    fetch('/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(res => {
        if (res.ok) {
            res.json().then(setUser)
            navigate("/")
            setFormData({
                email: '',
                password: ''
            })
        } else {
            res.json().then(errorResponse => setErrors(errorResponse.errors))
        }
    })
}

  return (
    <div className="App-header">
      <div>
                <h1>Sign Up</h1>
         <Form onSubmit={handleSubmit} id="myForm" >
            <Form.Group className="mb-3" controlId="formUsername" >  
                <Form.Label> Username</Form.Label>
                <Form.Control type="text" placeholder="Username" onChange={handleChange}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId=" formEmail"> 
                <Form.Label> Email Address</Form.Label>
                <Form.Control type="email" placeholder="Enter email" onChange={handleChange}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formPassword"> 
                 <Form.Label> Password</Form.Label>
                 <Form.Control type="password" placeholder="Enter password" onChange={handleChange}/>
                 {errors.length > 0 ? <div className="error-container">{errors.map(error => <p className="error" key={error}>{error}</p>)}</div> : <div></div>}
            </Form.Group>
            <Button variant="success" type="submit" form="myForm">
                Submit
            </Button>           
        </Form>
    </div>
        </div>
  );
}

export default Signup;

I get error messages saying the Username/ Email / Password can't be blank. What is interesting to me is that I have the same code, but not using bootstrap, and it works. Appreciate the help.

CodePudding user response：

I think you should have name attribute for each Form.Control. For example,

<Form.Control name="username" type="text" placeholder="Username" onChange={handleChange}/>

<Form.Control name="email" type="email" placeholder="Enter email" onChange={handleChange}/>

<Form.Control name="password" type="password" placeholder="Enter password" onChange={handleChange}/>