material ui chip not working inside a loop

Question

I'm trying to use the Chip component from material-ui.

It worked when I used it alone, but when I rendered it using a loop (map) I got this error :

Warning: Failed prop type: The property children is not supported. Please remove it. in Chip (created by WithStyles(Chip))

here is an example of my render method :

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip key={index}>{e}</Chip>)}
        </div>
    );
}

From the official Material-ui docs about children:

This property isn't supported. Use the component property if you need to change the children structure.

However in my example I'm not using the child prop, what is wrong with my code ?

OK I see, but how I can, that was the problem, I update the code so I can output the content of {e}, in the label prop — aName

Michael Titi Kantz Michael Titi Kantz · Accepted Answer · 2019-05-19T18:26:35

You are sending e as a child to the Chip component.

If you want to show the text of the array element (e) you should send it via label prop.

This should do the work for you:

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip label={e} key={index} />)}
        </div>
    );
}

material ui chip not working inside a loop

1 Answers