I created a helper function to reduce some functions in components. So whenever I need that helper function I could use them in the component needed. I don't know what is the correct way of doing it but I tried this way. I need to pass form, setForm state and event to the helper function. For example.
Main.js
import { useState } from "react";
// helper
import HandleChange from "./HandleChange";
function Main() {
const [form, setForm] = useState({
firstName: "",
lastName: "",
});
// ------> This is what I want to move to helper component.
// function handleChange(event) {
// const { name, value } = event.target;
// setForm({
// ...form,
// [name]: value,
// });
// }
// ------> This is how I used helper component
const handleChange = HandleChange(form, setForm, event);
return (
<input
type="text"
name="firstName"
value={form.firstName}
{/****** this is how I passed handleChange ******/}
onChange={handleChange}
/>
)
}
Helper.js
export default function HandleChange(form, setForm, event) {
const { name, value } = event.target;
setForm({
...form,
[name]: value,
});
}
You just change decalre handleChange like this:
const handleChange = (event) => HandleChange(form, setForm, event);
Interesting approach. I suggest writing the helper function in the following way:
// Component
[...]
return (
<input
type="text"
name="firstName"
value={form.firstName}
onChange={event => setForm(assignValueToName(form, event))}
/>
)
// Helper
function assignValueToName(existing, event) {
const { name, value } = event.target;
return {...existing, [name]: value};
}
It will be better if you create your custom hook, like this:
This way you can use it directly as any other hook without creating custom logic or passing any parameters
//App.jsx
import useCustomForm from "./myCustomForm";
export default function App() {
const [form, setForm] = useCustomForm({
firstName: "qqq",
lastName: "www"
});
return (
<input
type="text"
name="firstName"
value={form.firstName}
onChange={setForm}
/>
);
}
//myCustomForm.js
import { useState } from "react";
export default (defaultState) => {
const [formState, setFormState] = useState(defaultState);
const handleChange = ({target}) => {
const { name, value } = target;
setFormState({
...formState,
[name]: value
});
console.log(formState);
};
return [formState, handleChange];
};