Как из объекта вернуть верстку в react?

Question

[Николай Семенов]

Ребятушки, всем привет!
столкнулся с такой проблемой, есть функция

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

как вернуть ProgressBarItem столько раз сколько ключей в объекте, понимаю что нужно при каждом прохождения цикла в массив добавлять очередное ProgressBarItem, а потом вернуть массив. попробовал не получилось. раньше делал через map, сейчас надо через объект. помогите разобраться как в переменную правильно поместить разметку?

Comments

[Роман Александрович]

let items=[]
for (let key in nameUnit) {
      items.push(
<ProgressBarItem
            colorFill={colorFill} 
            collorBar={collorBar}/>
); }

return (
          {items}
      )

если я вас правильно понял то попробуйте это

[Николай Семенов]

Роман Александрович, правильно поняли, спасибо большое. все получилось

Answer 1

[abberati]

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

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

Comments

[Николай Семенов]

Спасибо за решение. оно правильное но я задачу сформулировал не правильно, в моей случае Object.keys(nameUnit) не совсем подойдет. мне кроме стили нужно еще данные туда передавать. в итоге сделал так

renderContent() {
    //const {nameUnit, collorBar, colorFill} = this.props;
    //test data
const nameUnit = {
      1: {
        tagName: 'test1',
        tagValue: 57
      },
      2: {
        tagName: 'test2',
        tagValue: 90
      },
      3: {
        tagName: 'test3',
        tagValue: 25
      }
    };
    const barStyle = {
      background: '#F4645'
    };
    let progressBarItems = [];
    for (let key in nameUnit) {
      let tagName = nameUnit[key].tagName;
      let tagValue = nameUnit[key].tagValue;
      let fillStyle = {
        background: '#e0463e',
        width: nameUnit[key].tagValue + '%'
      }
      progressBarItems.push(
          <li className="progress-bar__item" style={barStyle}> 
            <span className="progress-bar__value" style={fillStyle}>
              <span className="progress-bar__info">
                <span>{tagName}</span>
                <span>{tagValue} %</span>
              </span>
            </span>
          </li>
        );
      }
      return progressBarItems;
    }

с Object.keys(nameUnit) по-моему так не сделаешь, он возвращает только массив ключей же?

[abberati]

Николай Семенов, итерация через цикл - плохое решение, слишком императивно (ты объявляешь цикл, ты объявляешь массив, пушишь в него, это всё тебе не нужно на самом деле. ты просто хочешь обойти объект)

есть Object.values, который пока не очень распространён, с ним получилось бы идеально.

но можно обойтись и с keys

const nameUnit = {
    1: {
      tagName: 'test1',
      tagValue: 57
    },
    2: {
      tagName: 'test2',
      tagValue: 90
    },
    3: {
      tagName: 'test3',
      tagValue: 25
    }
  };


renderItem(item, i) {
  const {tagName, tagValue} = item;
  
  const barStyle = {
    background: '#F4645'
  };

  const fillStyle = {
    background: '#e0463e',
    width: `${tagValue}%`
  }

  return (
    <li key={i} className="progress-bar__item" style={barStyle}> 
      <span className="progress-bar__value" style={fillStyle}>
        <span className="progress-bar__info">
          <span>{tagName}</span>
          <span>{tagValue} %</span>
        </span>
      </span>
    </li>
  )
}

renderContent() {
  return Object
    .keys(nameUnit)
    .map((key, i) => this.renderItem(nameUnit[key], i));
}

[Николай Семенов]

abberati,
сделал как вы подсказали, но что-то не работает

class ProgressBar extends Component {
  renderProgressBar(item, i) {
    const {barName, barValue} = item;
    const {collorBar, colorFill} = this.props;
    const barStyle = {
      background: collorBar
    };
    let fillStyle = {
      background: colorFill,
      width: `${barValue}%`
    }
    return (
      <li key={i} className="progress-bar__item" style={barStyle}> 
        <span className="progress-bar__value" style={fillStyle}>
          <span className="progress-bar__info">
            <span>{barName}</span>
            <span>{barValue} %</span>
          </span>
        </span>
      </li>
    )
  }
  renderContent() {
    const {analyticData} = this.props;
    console.log(analyticData)
    return Object.keys(analyticData).map((key, i) => {
      this.renderProgressBar(analyticData[key], i)
    })
    }

   /**
   * Renders "ProgressBarList component"
   * @return {string} - HTML markup for the component
   */
  render() {
    return <ul className="progress-bar__list"> 
      {this.renderContent()}
    </ul>;
  }
}

export default ProgressBar;

ошибка TypeError: Cannot convert undefined or null to object

[Николай Семенов]

abberati, как я понял на момент рендеринга(вызова функции) данных с родительского компонента еще нет