I have integrated react-hook-form with my form, where it is not registering field with name has single quote in the middle. Instead it stripes single quote .
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);
output : {register Patients Name: undefined, gender: "female"}
It looks like you are trying to assign the input field name as the value. You could try using the 'name' as the field name and ${name} as the input value.
Something like this may work better:
<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>
If you really need a dynamic input field name, you could try:
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>
);
}