How to return layout from an object to react?

Question

JavaScript

Guys, hello everyone!
faced such a problem, there is a function

renderContent() {
    const {nameUnit, collorBar, colorFill} = this.props
    for (let key in nameUnit) {
      return (
          <ProgressBarItem
            colorFill={colorFill} 
            collorBar={collorBar}/>
      )
    }
    console.log(this.props);
  }

how to return a ProgressBarItem as many times as there are keys in the object, I understand that it is necessary to add another ProgressBarItem to the array every time the loop passes, and then return the array. tried it didn't work. I used to do it through a map, now I need to do it through an object. Help me figure out how to correctly place the markup in a variable?

Answer 1

renderContent() {
  const {nameUnit, collorBar, colorFill} = this.props

  return Object.keys(nameUnit)
    .map(key => (
      <ProgressBarItem
      colorFill={colorFill} 
      collorBar={collorBar}/>
    ))
}