usetheform
Edit page
Introduction
Components
Hooks
useAsyncValidationuseCollectionuseFielduseFormuseMultipleFormuseSelectorArgumentsReturnsBasic usageuseValidation
Material UI - React Select

useSelector

useSelector(selector: Function) allows a user to pick a single "Field" from the form state using a selector function.

Example

function Counter() {
  const [counter, setCounter] = useSelector(state => state.counter)
  return <span>{counter}</span>
}

The Counter component will re-render on changes.

IMPORTANT: Multiple field-selections within the same selector function are not allowed.

// BAD 👎
const [counter, setCounter] = useSelector(state => ({ counter1 : state.counter1, counter2 : state.counter2 }));
// OK 👍   
const [counter1, setCounter1] = useSelector(state => state.counter1);
const [counter2, setCounter2] = useSelector(state => state.counter2);

Arguments

selector: function

Returns

helpers : array

An array that holds the value of the field and a function to update it.

const [valueField, setFieldValue] = useSelector(state => state.anyprop);

The setFieldValue function is used to update the field value.

It accepts as an argument:

  • a function which will receive the previous value and return an updated value.

    const [valueField, setFieldValue] = useSelector(state => state.anyprop);
    setFieldValue(prev => ++prev);

  • a new field value.

    const [valueField, setFieldValue] = useSelector(state => state.anyprop);
    setFieldValue(newValue);

Basic usage

import{ Form, Input } from 'usetheform'
Counter:
  • {} 0 keys
    const CounterReader = () => {
      const [counter, setCounterValue] = useSelector(state => state.counter);
      return (
        <div>
          <span>{counter}</span>
          <button type="button" onClick={() => setCounterValue(0)}>
            Reset Counter
          </button>
        </div>
      );
    }