onChange doesn't trigger in my React application

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 database

     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 }"

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

Add `console.log(newTeam)` in the submit handler and see if the data is there — Konrad, Jan 18 '23 at 22:11
@Konrad it keep showing "{ nombre: '', logo: '', liga: '', id: 3 } — Agustin, Jan 19 '23 at 01:06

score 1 · Answer 1 · answered Jan 18 '23 at 22:16

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

answered Jan 18 '23 at 22:16

Bender

103
8

Thanks but it keep showing the same... at the beta docs has a "value" property but as soon as i add that property i can't write on the input – Agustin Jan 19 '23 at 01:08
You have a few things going on. Unless I have a sandbox version of the app. It would be hard to debug. You can try https://replit.com/~ if you want to make a sharable sandbox – Bender Jan 19 '23 at 11:11
i forgot that i use 'use client' i deleted it and it works fine i don't know why it wont work with a client component... but it's working now.. – Agustin Jan 19 '23 at 14:46

onChange doesn't trigger in my React application

1 Answers1