Multiple form values in one react recoil atom override each other

Question

Is there any way to hold multiple form input values in one React Recoil atom? I keep trying to add 2 form field values, but they just override each other.

I have a registration form which has 2 fields; email and phone.

My (simplified) form component looks like so;

import { atom, useSetRecoilState, useRecoilValue } from 'recoil';

const registerAtom = atom({
    key: 'register',
    default: [],
});

function Registration() {
    const setEmail = useSetRecoilState(registerAtom);
    const email = useRecoilValue(registerAtom);

    const setPhone = useSetRecoilState(registerAtom);
    const phone = useRecoilValue(registerAtom);

    return (
        <>
            
                 setEmail(e.target.value)} placeholder="Email Address" />
                 setPhone(e.target.value)} placeholder="Phone Number" />
            
        
    )
}

user_438273 · Answer

If you are certain that you will never need to read or write the email and phone states independently, a simple approach is to use a single atom with an object value (this is equivalent to using React's useState hook with an object value):

import {atom} from 'recoil';

const contactInfoState = atom({
  key: 'contactInfo',
  default: {
    email: '',
    phone: '',
  },
});

Then, use like this (updating the entire object every time):

import {useRecoilState} from 'recoil';

function Registration () {
  const [{email, phone}, setContactInfo] = useRecoilState(contactInfoState);
  
  return (
    
       setContactInfo({email: ev.target.value, phone})}
        placeholder="Email Address"
      />
       setContactInfo({email, phone: ev.target.value})}
        placeholder="Phone Number"
      />
    
  )
}

However, the idiomatic way to do this (and where Recoil becomes more powerful) is composition of atoms using a selector, which can provide a way for reading and writing the values together (just like in the example above), yet still allows for reading and writing them independently using their atoms:

import {atom, DefaultValue, selector} from 'recoil';

const emailState = atom({
  key: 'email',
  default: '',
});

const phoneState = atom({
  key: 'phone',
  default: '',
});

const contactInfoState = selector({
  key: 'contactInfo',
  get: ({get}) => {
    // get values from individual atoms:
    const email = get(emailState);
    const phone = get(phoneState);
    // then combine into desired shape (object) and return:
    return {email, phone};
  },
  set: ({set}, value) => {
    // in a Reset action, the value will be DefaultValue (read more in selector docs):
    if (value instanceof DefaultValue) {
      set(emailState, value);
      set(phoneState, value);
      return;
    }
    // otherwise, update individual atoms from new object state:
    set(emailState, value.email);
    set(phoneState, value.phone);
  },
});

Here's a complete and self-contained example in a snippet, which you can run on this page to verify that it works:

Note: It uses the UMD versions of React, ReactDOM, and Recoil, so they are exposed globally using those names instead of using import statements.

user_5750016 · Answer

Your atom has a single value register holds an array at the beginning, and later be assigned with the values of the inputs.

Both inputs set the state of the atom registerAtom, makes it override each other.

What you need to do is holding an object as a value for register, that has two keys: email and phone. Then, you can update each key with the relevant value from the specific input that has changed.

So. instead of:

const registerAtom = atom({
    key: 'register',
    default: [],
});

Create this atom:

const registerAtom = atom({
    key: 'register',
    default: {
        email: '',
        phone: ''
    },
});

This created the object with initial values of empty strings for email and phone.

Now you define the set functions like this:

const setRegistrationInfo = useSetRecoilState(registerAtom);
const registrationInfo = useRecoilValue(registerAtom);

Finally, all you need to do is to change the specific key of the object when you are setting its state. Make sure you are creating a new Object since you are updating a state and the state expects a new updated object, so we will use Object.assign:

        
             setRegistrationInfo(Object.assign(registrationInfo, {email: e.target.value}))} placeholder="Email Address" />
             setRegistrationInfo(Object.assign(registrationInfo, {phone: e.target.value}))} placeholder="Phone Number" />

Final code:

import { atom, useSetRecoilState, useRecoilValue } from 'recoil';

const registerAtom = atom({
    key: 'register',
    default: {
        email: '',
        phone: ''
    },
});

function Registration() {

    const setRegistrationInfo = useSetRecoilState(registerAtom);
    const registrationInfo = useRecoilValue(registerAtom);

    return (
        <>
            
                 setRegistrationInfo(Object.assign(registrationInfo, {email: e.target.value}))} placeholder="Email Address" />
                 setRegistrationInfo(Object.assign(registrationInfo, {phone: e.target.value}))} placeholder="Phone Number" />
            
        
    )
}

Multiple form values in one react recoil atom override each other

2 Answers