Can't map array data in react js to child component

Question

I am using react and react-dom version "^16.12.0";

I would like to use the material ui multi selectbox with chips inside of my react js project. Therefore I need to map my array into the list as an <MenuItem>. I am getting the Objects are not valid as a React child (found: object with keys {value, label}).If you meant to render a collection of children, use an array instead. I have already tried the Object.keys(races).map and Object.entries(races).map ``` and I also tried to put this into a const inside of render, but I'm always getting the same error...

Here's the snippet which isn't working (inside of a calss component):

              <Grid item xs={6}>
                <Select
                  name="dogName"
                  multiple
                  id="select"
                  value={this.state.dogName}
                  onChange={this.handleChangeMultiple.bind(this)}
                  input={<TextField />}
                  renderValue={(selected) => (
                    <div style={{display: 'flex',flexWrap: 'wrap',}}>
                      {selected.map((value) => (
                        <Chip key={value} label={value} style={{margin: 2,}} />
                      ))}
                    </div>
                  )}
                  >
                  {races.map((name) => (
                    <MenuItem key={name.value} value={name.label} >
                      {name}
                    </MenuItem>
                  ))}
                </Select>
              </Grid>

And here is the array (in it's own '.js' file, imported as import {races} from './helper/dograces.js';):

export const races = [
    {value: 'unknown', label: 'unknown'},
    {value: 'B1', label: 'Bulldog'},
    {value: 'P1', label: 'Pitbull'},
...
]

Please help .. I really don't understand where the problem is..!

Best regards!

norbitrial · Accepted Answer · 2020-09-30 18:41:47Z

1

The main problem is not with the .map() part itself or with <MenuItem /> but the children.

Try as the following instead:

{races.map((name) => (
  <MenuItem key={name.value} value={name.label}>
     {name.value}
  </MenuItem>
))}

I've changed from {name} to {name.value} because name is an object which is not a valid React child as the error message states. Instead using name.value will be a valid one as it's a string.

answered Sep 30, 2020 at 18:41

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ninja Over a year ago

Thanks a lot! A bit embarrassing that I wasn't aware of this >< Now other errors appear but I think I can handle them :) Have a nice evening!

norbitrial Over a year ago

@ninja Happy to help! :) If the solution worked, please consider accepting as the answer for your question, thank you!

Viet Dinh · Accepted Answer · 2020-09-30 18:43:49Z

0

Child component do not accept an object type. I guest you want to show label in items menu. Your code should be:

{races.map((name) => (
                <MenuItem key={name.value} value={name.label} >
                  {name.label}
                </MenuItem>
              ))}

answered Sep 30, 2020 at 18:43

Viet Dinh

2,0261 gold badge10 silver badges21 bronze badges

3 Comments

ninja Over a year ago

Yes, this is even more accurate 👍 but @norbitrial unfortunately I don't know how to mark answers as "final"..

Viet Dinh Over a year ago

You can check here: stackoverflow.com/help/accepted-answer :))))

Viet Dinh Over a year ago

stackoverflow.com/help/someone-answers. I believe you can do that!

Collectives™ on Stack Overflow

Can't map array data in react js to child component

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related