Category: React Answers

Sometimes, we want to add validation of form input fields with React.

In this article, we’ll look at how to add validation of form input fields with React.

How to add validation of form input fields with React?

To add validation of form input fields with React, we can use a library like React Hook Form.

We can install the library with:

npm i react-hook-form

Then we can use it by writing:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("age", { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

We add an input and set the props of it by spreading the object returned by register.

We call register with the name attribute value of the input and an object with the regex pattern that we want to validate input value with.

Then we get the errors from the errors object.

And we set the onSubmit prop of the form element with the event handler function returned by handleSubmit, which only runs when all the input values are valid.

Conclusion

To add validation of form input fields with React, we can use a library like React Hook Form.

Sometimes, we want to run code after React hooks state variable is updated.

In this article, we’ll look at how to run code after React hooks state variable is updated.

How to run code after React hooks state variable is updated?

To run code after React hooks state variable is updated, we can watch the state’s value with the useEffect callback and run code when the value we’re looking for is set.

For instance, we write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count === 5) {
      console.log("you win");
    }
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <p>{count}</p>
    </div>
  );
}

We define the count state with the useState hook.

Then we add a button that calls setCount to increment the count when we click on it.

Then we add the useEffect callback that watches count‘s value and log 'you win' when count is 5.

Conclusion

To run code after React hooks state variable is updated, we can watch the state’s value with the useEffect callback and run code when the value we’re looking for is set.

Sometimes, we want to fix the input type file onChange not firing issue with React.

In this article, we’ll look at how to fix the input type file onChange not firing issue with React.

How to fix the input type file onChange not firing issue with React?

To fix the input type file onChange not firing issue with React, we set the onChange prop to a function that takes the change event object.

For instance, we write:

import React from "react";

export default function App() {
  const onChange = (e) => {
    console.log(e.target.files);
  };

  return (
    <form>
      <input type="file" multiple onChange={onChange} />
    </form>
  );
}

We have a file input which we create by setting the type attribute to file.

And we add the multiple prop to it to make it allow multiple file selection.

Finally, we set the onChange prop to the onChange function to get the files selected when they’re selected.

Therefore, when we select one or more files with the file input, we should see the e.target.files logged.

e.target.files should have all the files selected.

Conclusion

To fix the input type file onChange not firing issue with React, we set the onChange prop to a function that takes the change event object.

Sometimes, we want to enable multiple file selection with the file input with React

In this article, we’ll look at how to enable multiple file selection with the file input with React

How to input multiple file from form with React?

To enable multiple file selection with the file input with React, we can add the multiple prop to the file input.

For instance, we write:

import React from "react";

export default function App() {
  const onChange = (e) => {
    console.log(e.target.files);
  };

  return (
    <form>
      <input type="file" multiple onChange={onChange} />
    </form>
  );
}

We have a file input which we create by setting the type attribute to file.

And we add the multiple prop to it to make it allow multiple file selection.

Finally, we set the onChange prop to the onChange function to get the files selected when they’re selected.

Therefore, when we select one or more files with the file input, we should see the e.target.files logged.

e.target.files should have all the files selected.

Conclusion

To enable multiple file selection with the file input with React, we can add the multiple prop to the file input.

Sometimes, we want to add a delay onMouseOver event handler with React.

In this article, we’ll look at how to add a delay onMouseOver event handler with React.

How to add a delay onMouseOver event handler with React?

To add a delay onMouseOver event handler with React, we can use the Lodash debounce function.

For instance, we write:

import React, { useState } from "react";
import { debounce } from "lodash";

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  console.log(isHovered);

  const debouncedHandleMouseEnter = debounce(() => setIsHovered(true), 500);

  const handlOnMouseLeave = () => {
    setIsHovered(false);
    debouncedHandleMouseEnter.cancel();
  };

  return (
    <div
      onMouseEnter={debouncedHandleMouseEnter}
      onMouseLeave={handlOnMouseLeave}
    >
      hover me
    </div>
  );
}

We defined the isHovered state with useState.

Then we define the debouncedHandleMouseEnter function by passing in the event handler function into Lodash’s debounce function.

We set the debounce delay to 500ms.

Next, we have the handlOnMouseLeave function where we call debouncedHandleMouseEnter.cancel to cancel the calling of the debouncedHandleMouseEnter function when handlOnMouseLeave is called.

Therefore, when we hover over the div, we see isHovered becomes true.

And when we move our mouse away from the div, isHovered becomes false.

Conclusion

To add a delay onMouseOver event handler with React, we can use the Lodash debounce function.