Helper function reactjs

Question

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

Viet · Accepted Answer · 2021-08-08 15:00:51Z

2

You just change decalre handleChange like this:

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

answered Aug 8, 2021 at 15:00

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ErDevFy Over a year ago

Thank you. Glad I was doing things great except that one. I can approve this in 5 minutes. Thanks again

Elias · Accepted Answer · 2021-08-08 15:03:40Z

1

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

answered Aug 8, 2021 at 15:03

Elias

4,1393 gold badges29 silver badges54 bronze badges

5 Comments

ErDevFy Over a year ago

Sorry I didn't know which one to mark as approve since both answers work fine. But he answered earlier so I had to approve it. I really like both answers. Thank you.

Elias Over a year ago

@ErDevFy haha, yes their answer is totally fine. I just think that your original concept of having two "handle change" is confusing to readers. I recommend being more expressive about what you do. :)

ErDevFy Over a year ago

Yeah that is true. But I tried your answer I think it didn't work. I couldn't change the input fields. I made sure I had a return statement and removed the setForm

Elias Over a year ago

@ErDevFy If you care to I can help you make it work

ErDevFy Over a year ago

No, that is fine. I appreciate it.

Harsh Saini · Accepted Answer · 2021-08-08 15:21:01Z

1

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

answered Aug 8, 2021 at 15:21

Harsh Saini

6365 silver badges13 bronze badges

3 Comments

ErDevFy Over a year ago

Thanks. This looks good but I haven't tried custom hooks yet.

Harsh Saini Over a year ago

It's an important concept in react.js. You can refer this to read more reactjs.org/docs/hooks-custom.html.

ErDevFy Over a year ago

I will check it out. Thank you.

Collectives™ on Stack Overflow

Helper function reactjs

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related