Usage

The idea behind this library is that you to have a way to set errors for fields from places very distant from you component, which renders the errors. This library will act as a middle man between the components that render the errors, and the components that set the errors.

Setting errors

Here’s how you can set errors:

import React from 'react';
import { setErrors } from '@42.nl/react-error-store';

async function submitUser(user) {
  return fetch('api/users', {
    method: 'POST',
    body: JSON.stringify(user)
  })
    .then(response => response.json())
    .catch(error => {
      if (error.response.status === 422) {
        error.response.json().then(errors => {
          // Set the global errors
          setErrors(errors);
        });
      }
    });
}

The errors are expected to look like this:

{
  "User": {
    "email": ["invalid email"],
    "name": ["name is to short", "name not capitalized"]
  },
  "House": {
    "street": ["Not a valid street in the Netherlands"]
  }
}

The idea is that each entity has multiple fields where the values are the actual errors.

Retrieving errors

This library provides access to the errors for a particular field via useErrorsForValidator:

import React from 'react';
import { useErrorsForValidator } from '@42.nl/react-error-store';

function FormError() {
  const errors = useErrorsForValidator('User.email'); // Get errors by validator

  return (
    <ul>
      {errors.map(error => <li key={error}>{error}</span>);}
    </ul>
  );
};

Clearing all errors

You can clear the entire store by calling clearErrors:

import React, { useEffect } from 'react';
import { clearErrors } from '@42.nl/react-error-store';

function Form() {
  useEffect(() => {
    clearErrors();
  }, []);
}

The above situation can also be achieved by using the useClearErrors hook, which simply calls the useEffect for you.

import React, { useEffect } from 'react';
import { useClearErrors } from '@42.nl/react-error-store';

function Form() {
  useClearErrors();
}

Clearing specific errors for a field

You can reset an error by calling clearErrorsForValidator:

import React, { useState } from 'react';
import { clearErrorsForValidator } from '@42.nl/react-error-store';

function UserForm() {
  const [username, setUsername] = useState('');

  function onUsernameChanged(event) {
    setUsername(event.target.value);

    // Clear errors whenever the value changes so errors do not stick around.
    clearErrorsForValidator('User.name');
  }

  return <input name="username" onChange={onUsernameChanged} />;
}