Attempt to set read-only Recoil Value: selectorFamily

Question

I make some test code. Added selectorFamily from Recoil to set up state with names. It will be used in future to get some names from API with provided page.

Names are listed below in listing tag and one button.

When you click button it will change second name value, but I'm getting error: "Attempt to set read-only Recoil Value: selectorFamily", I can't figure what I'm doing wrong with this code:

import { selectorFamily, useRecoilState } from "recoil";

const namesState = selectorFamily({
    key: 'names',
    get: (page) => ({ get }) => {

        let data = [
            { name: 'Tom' },
            { name: 'John' },
            { name: 'Jane' }
        ];

        return data;
    }
});


const ChangeName = () => {

    const [names, setNames] = useRecoilState(namesState(3));

    const changeSecondName = () => {

        let newNames = [...names].map((data, i) => {
            let newData = { ...data };
            if (i === 1) {
                newData.name = 'Steve';
            }
            return newData;
        });

        setNames(newNames);

    };

    return (
        <div>
            <ul>
                {names.map((item) => {
                    return (
                        <li key={item.name}>{item.name}</li>
                    );
                })}
            </ul>
            <button onClick={changeSecondName}>Change second name to Steve</button>
        </div>
    );
};

export default ChangeName;

code is simple, I only try how I can change some value in object that is in array.

Thx

Answer 1

I manage to work. Added one new writeable state like @shobe said. Also added useEffiect for first fetching and populating atomNames state:

import { useEffect } from "react";
import { selectorFamily, useRecoilState, atom } from "recoil";

const namesAtomState = atom({
    key: 'atomNames',
    default: []
});

const namesState = selectorFamily({
    key: 'names',
    get: (page) => ({ get }) => {

        let data = [
            { name: 'Tom' },
            { name: 'John' },
            { name: 'Jane' }
        ];

        return data;
    }
    ,
    set: () => ({ set, get }, value) => {

        const names = get(namesState(2));
        
        let newNames = [...names].map((data, i) => {
            let newData = { ...data };
            if (i === 1) {
                newData.name = 'Steve';
            }
            return newData;
        });

        set(namesAtomState, newNames);

    }
});


const ChangeName = () => {

    const [namesAtom, setNamesAtom] = useRecoilState(namesAtomState);
    const [names, setNames] = useRecoilState(namesState(2));

    // Update state when AJAX return values
    useEffect(()=>{
        if (names) {
            setNamesAtom(names);
        }
    },[names, setNamesAtom]);

    // Set new name for second value in array
    const changeSecondName = () => {
        setNames(2);
    };

    return (
        <div>
            <ul>
                {namesAtom.map((item) => {
                    return (
                        <li key={item.name}>{item.name}</li>
                    );
                })}
            </ul>
            <button onClick={changeSecondName}>Change second name to Steve</button>
        </div>
    );
};

export default ChangeName;

Answer 2

To be able to call useRecoilState on selector you need to use atom or writeable selector (selector which has a set method). You don't have set method implemented on your selector family. Consider using atom family instead.