How make React admin's <SimpleFormIterator> behave as a stack on item addition (add item on top)?

I have an item with a nested list of items. I can edit these nested items individually using a <SimpleFormIterator> mixed with a <FormDataConsumer>. The issue is that when i insert a new item in the list, it becomes the last item. I would like it to be the first, and shift every other item down a slot.

Maybe something like using a custom with an addOnTop callback could help? But I don't see a way to make it work without rewriting the whole component from scratch.

     addButton={<ListAddButton onClick={addOnTop??} />}
     removeButton={<ListRemoveButton />}

2 answers

  • answered 2022-05-04 11:18 Stjepan Džojić

    Maybe try with unshift(). Here is the link:

  • answered 2022-05-04 11:31 Tend

    In the end I think I managed to solve doing something like this:

    const form = useForm();
        const getData = useCallback(() => {
            const { articles } = form.getState().values;
            if (!articles) return [undefined];
            return articles;
    }, [form]);
            <ListAddButton onClick={() => form.change("articles", getData())} />
        removeButton={<ListRemoveButton />}
            enter: false,
            exit: false,
            addEndListener: () => {},

    I'm not sure it is the best approach, but it seems to work, although there is currently a bug with this component

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum