He integrado react-hook-form con mi formulario, donde no está registrando el campo con el nombre tiene una comilla simple en el medio. En su lugar, se divide entre comillas simples.
import React from "react"; import ReactDOM from "react-dom"; import { useForm } from "react-hook-form"; import "./styles.css"; //App component export default function App() { const { register, handleSubmit } = useForm(); //onSubmit Handler const onSubmit = (data) => console.log(data); //field name value const name = "Patient's Name"; //Return return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register(`register ${name}`)} /> <select {...register("gender")}> <option value="female">female</option> <option value="male">male</option> <option value="other">other</option> </select> <input type="submit" /> </form> ); } //Renders const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);salida: {registrar nombre de pacientes: indefinido, género: "femenino"}
Parece que está intentando asignar el nombre del campo de entrada como valor. Podría intentar usar el 'nombre' como el nombre del campo y ${name} como el valor de entrada.
Algo como esto puede funcionar mejor:
<form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <select {...register("gender")}> <option value="female">female</option> <option value="male">male</option> <option value="other">other</option> </select> <input type="submit" /> </form>Si realmente necesita un nombre de campo de entrada dinámico, puede intentar:
const name = "Patient\'s Name"; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register({name})} /> <select {...register("gender")}> <option value="female">female</option> <option value="male">male</option> <option value="other">other</option> </select> <input type="submit" /> </form> ); }