React-admin Array input with array of strings/numbers

javascript arrays reactjs react-admin
yBrodsky picture yBrodsky · Jul 22, 2018 · Viewed 8.5k times · Source

https://marmelab.com/react-admin/Inputs.html#arrayinput Examples cover cases where you have an array of objects:

  backlinks: [
        {
            date: '2012-08-10T00:00:00.000Z',
            url: 'http://example.com/foo/bar.html',
        },
        {
            date: '2012-08-14T00:00:00.000Z',
            url: 'https://blog.johndoe.com/2012/08/12/foobar.html',
        }
   ]

is it possible to have it work with just an array of strings?

backlinks: ['a', 'b', 'c']

Answer

kcrawford picture kcrawford · Oct 28, 2018

I was able to execute the inputs variant, as opposed to the fields variant, by simply not providing a source attribute for the inner TextField, and sourcing the array in the actual ArrayField. Then of course just use a SimpleFormIterator. Clearly React favors the use of keys, treating array types like maps, for the most part.

<ArrayInput source="my-source">
  <SimpleFormIterator>
    <TextInput />
  </SimpleFormIterator>
</ArrayInput>

Related questions

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render …

Read More
Delete item from state array in react

The story is, I should be able to put Bob, Sally and Jack into a box. I can also remove either from the box. When removed, no slot is left. people = ["Bob", "Sally", "Jack"] I now need to remove, say, "…

Read More
How to merge two array of objects with reactjs?

I have a react-big-calendar, I want to fetch the events of this week from the backend and the other weeks from the local storage. My code is : componentDidMount() { fetch("url") .then(Response => Response.json()) .then(data => { let evts = …

Read More