Error in mapping an array in React

Question

I have a problem in mapping an array in React, Here is the problem : this is my state of the parent element :

this.state = {
  grouping: 3,
  bars: [{
    snare: Array(16).fill('0'),
    hihat: Array(16).fill('0'),
    kick: Array(16).fill('0'),
  }]
}

i wanna pass the bars to the child element same this :

<Bar bar={this.state.bars}>

and in 'Bar' class i write this code :

class Bar extends Component {
    render(){
        const Bars = this.props.bars.map((bar)=>{
            return('something')
        }
        return({Bars})
    }
}

after this codes this error occurs to me :

Objects are not valid as a React child (found: object with keys {Bars}). If you meant to render a collection of children, use an array instead.

help me, please

Yes you are skipping JSX in your return as @MichaelSorensen pointed. Though, there should be curly braces this time :) — devserkan
– devserkan, Commented Jun 3, 2018 at 21:10

Joshua Fermin · Accepted Answer · 2018-06-03 21:06:43Z

5

Your issue is that a React component should only return a null or JSX.

you should be able to get what you want by doing the following:

class Bar extends Component {
    render(){
        return(
            {
                this.props.bars.map((bar)=>{
                    return <div>{bar}<div/>
                })
            }
        )
    }
}

answered Jun 3, 2018 at 21:06

Joshua Fermin

6469 silver badges20 bronze badges

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

2 Comments

Mahdi Over a year ago

thanks this code worked correctly, but sorry I don't have enough reputation to upvote this answer

devserkan Over a year ago

No problem, we are upvoting :)

Collectives™ on Stack Overflow

Error in mapping an array in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related