CODEWITHSUNDEEP
javascriptreactjs
ErDevFy
ErDevFy

Reputation: 105

Helper function reactjs

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,
  });
}

Upvotes: 2

Views: 593

Answers (3)

Harsh Saini
Harsh Saini

Reputation: 636

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];
};

Upvotes: 1

Elias
Elias

Reputation: 4141

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

Upvotes: 1

Viet
Viet

Reputation: 12807

You just change decalre handleChange like this:

const handleChange = (event) => HandleChange(form, setForm, event);

Upvotes: 2

Related Questions