render() React . Функция для вывода значений свойств

120
05 апреля 2019, 02:10

У меня есть массив объектов:

const arr = [
   {
    a: value1,
    b: value2,
    ..........
              }, 
   {
    a: value1,
    b: value2,
    c: value3,
    .........
              }, 
    {........,
     ........,
     ........,
     ........,
              }
]

Количество свойств в каждом объекте меняется, мне нужно отрендерить значения этих свойств в 3 колонки, вот как я это делаю сейчас:

render(){
  const columns = arr.map((item) => {
      return(
        <div className={column}>
           {item.a ? <span>{item.a}</span> : ''}
           {item.b ? <span>{item.b}</span> : ''}
           .....................
           .....................
        </div>
      )
    }) 
   }
return(
   {columns}
)

Как мне через функцию рендерить тоько те спаны, в которых есть значения, более оптимально и правильнее?

Answer 1

Вы можете использовать метод map также и с объектом, только вызывать его нужно не для самого объекта, а для его ключей, к-ые можно получить методом Object.keys.

Кроме того не обязательно сохранять результат arr.map в переменной, можно сразу поместить его в return.

render(){
    return (
        {arr.map((item) => 
            <div className={column}>
                {Object.keys(item).map((key) => 
                    <span>{item[key]}</span> 
                )}
            </div>
        )}
    )
}
READ ALSO
Вывод результата сравнения строк
javascript

Вывод результата сравнения строк

Есть 2 строки, хочу вывести разницу между ними после их сравненияДля этого я решила преобразовать их к массивам, потом сравнивать эти массивы,...

 180
Как удалить узел из DOM
javascript

Как удалить узел из DOM

Может тут кто-то подскажет решение проблемы? Пишу просто туду лист через классы, и не могу запустить метод deleteTask, тк не знаю как его закрепить...

 175
Как в Webpack 4 настроить Css Modules?
javascript

Как в Webpack 4 настроить Css Modules?

как в Webpack настроить CSS Modules чтобы генерировать вот такие классы (Hesh)

 164
Возникли проблемы с переводом с jq на js [закрыт]
javascript

Возникли проблемы с переводом с jq на js [закрыт]

Переведите 4 строчку на нативный js пожалуйста

 125