onChange doesn't trigger im stuck help me

Question

I'm Trying to built a random football team picker and i'm doing the database myself

I'm having a problem with the inputs

import React, { use, useRef, useState } from "react";

const fetchAll = async () => {
const getAll = await fetch("http://localhost:3000/api/getEquipos");
const data = await getAll.json();

return data;
};

const MyForm = () => {
const [newTeam, setNewTeam] = useState({
    nombre: "",
    logo: "",
    liga: ""
})

const handleChange = (e) => {
    setNewTeam({ [e.target.name]: e.target.value })
}
const data = use(fetchAll());
const handleSubmit = async (e) => {
    e.preventDefault();
    const lastId = await data.findLast((elem) => elem.id > 1);

    try {
        const addOne = await fetch("http://localhost:3000/api/addEquipos", {
            method: "POST",
            body: JSON.stringify({
                nombre: newTeam.nombre,
                logo: newTeam.logo,
                liga: newTeam.liga,
                id: lastId.id + 1,
            }),
        });
    } catch (error) {
        console.log(error);
    }
};

return (
    <div>
        <form onSubmit={handleSubmit}>
            <input type="text"
                placeholder="equipo"
                name="nombre"
                onChange={handleChange} />

            <input type="text"
                placeholder="logo"
                name="logo"
                onChange={handleChange} />

            <input type="text"
                placeholder="liga"
                name="liga"
                onChange={handleChange} />

            <input type="submit" value="submit" />
        </form>
    </div>
);
};

export default MyForm;

it's a simple form for sending my fields to my data base

     import dbConnect from "lib/dbConnect";
     import { equipoModel } from "lib/models/equiposModel";
     import { NextApiRequest, NextApiResponse } from "next";

     export default async function handler(
     req: NextApiRequest,
     res: NextApiResponse
     ) {
      await dbConnect();
      try {
        const body = JSON.parse(req.body);
        console.log(body);

     if (body.nombre === "") {
        return;
      } else {
      await equipoModel.create({
        nombre: body.nombre,
        logo: body.logo,
        liga: body.liga,
        id: body.id
      });
      res.json({ added: true });
      }
     } catch (error) {
    res.status(400).json(error);
  }
}

and the console.log(body) shows "{ nombre: '', logo: '', liga: '', id: 3 }"

please i'm stuck:(

i'm trying to send the data to my database and it only shows empty strings

Answer 1

It doesn't look like you're saving the Team correctly.

 const handleChange = (e) => { setNewTeam({...newTeam, [e.target.name]: e.target.value }) }

I recommend the new beta docs on managing state https://beta.reactjs.org/learn/managing-state