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']
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>
value supplied to TextField.'
Error: Cannot set a numeric property on an object though my array contains URLs such as "picsum.photos/800"
<TextInput source="" />
key={Math.random()} did the job.Here is my working code based on @fzaninotto's post in react-admin Issues:
import Chip from '@material-ui/core/Chip'
const TextArrayField = ({ record, source }) => {
const array = record[source]
if (typeof array === 'undefined' || array === null || array.length === 0) {
return <div/>
} else {
return (
<>
{array.map(item => <Chip label={item} key={item}/>)}
</>
)
}
}
TextArrayField.defaultProps = { addLabel: true }
Usage:
<TextArrayField source="tags">
<SingleFieldList>
<ChipField source="id" />
</SingleFieldList>
</TextArrayField>
<TextArrayField source="tags" /> as the custom component isn't using the children passed to it.
record[source] with this: ` import get from 'lodash/get'; ... const array = get(record, source); ... `Maybe you can create your own Field component which can able to take source and record as props.
function populateList(numbers) {
return numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
}
const SimpleArray = ({source, record = {}}) =>
<ul>
{
populateList(record[source])
}
</ul>;
SimpleArray.defaultProps = {
addLabel: true,
label: 'List'
};
SimpleArray.propTypes = {
label: PropTypes.string,
record: PropTypes.object,
source: PropTypes.string
};
export default SimpleArray;
And easily use it inside any form element like :
<SimpleShowLayout>
<TextField source="id"/>
<TextField label="Title" source="title" className={classes.name}/>
<TextField source="title"/>
<NumberField source="defaultItemCount"/>
<RichTextField source="description"/>
<NumberField source="priceInNumber"/>
<SimpleArray source="attributeArray" label="Product Attributes" />
</SimpleShowLayout>
My solution expands a bit on the answer from @kcrawford
In my case, I needed to output the array of URLs. Simplified version of the code
const MassMessageEdit: FC<any> = (props) => (
<Edit {...props}>
<SimpleForm {...props}>
...
<ArrayField source="onesignalUrls">
<URLs />
</ArrayField>
</CreateEditForm>
</Edit>
)
const URLs: React.FC<{ ids?: string[] }> = (props) => {
if (!props["ids"]) return null
return (
<ul>
{props["ids"].map((link, key) => (
<li key={key}>
<a href={JSON.parse(link) as string} rel="noopener noreferrer" target="_blank">
Notification {key + 1}
</a>
</li>
))}
</ul>
)
}
ArrayField passes the values array as ids, which can later be parsed and rendered
This is how I did to get it work:
<ArrayInput source="backlinks">
<SimpleFormIterator inline>
<TextInput source="." />
</SimpleFormIterator>
</ArrayInput>
<TextField source="url"/>