Как выгрузить стили из объекта React?

Question

[vladislavprozorovskiy]

Добрый вечер всем.Есть объект вида: {id: 1, title: "some-text", color: "black"
Нужно сделать 10 блоков 100 на 100 пикселей и каждому из них задать цвет, который записан в свойстве color объекта, возможно ли это сделать через map?

Answer 1

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

если бы у вас был массив обьектов типа

array=[
{id: 1, title: "some-text", color: "black"},
{id: 2, title: "some-text", color: "black"},
{id: 3, title: "some-text", color: "black"}
]

тогда был бы смысл использовать map, в вашем случае думаю и for хватит

Comments

[vladislavprozorovskiy]

Такой и есть, извиняюсь что не указал это в начале

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

vladislavprozorovskiy,

{array.map(el => (
    <div key={el.id} style={{width:100,heigth:100,backgroundColor:el.color}}>
      {el.title}
    </div>
  ))}

Answer 2

[Антон Спирин]

Вы, наверно, имели ввиду массив объектов? Тогда, так:

<Wrapper>
  {array.map(el => (
    <MyComponent key={el.id} style={{ color: el.color }}>
      {el.title}
    </MyComponent>
  ))}
</Wrapper>

Comments

[vladislavprozorovskiy]

Получилось так, как вы говорили.Но у блоков просто появилось свойство color

<div class="block" color="black"><p>some-text1 </p> </div>

никак в стили оно не записано

[Антон Спирин]

vladislavprozorovskiy, вам в стили надо? В вопросе написано в свойства. Поправил.

[Антон Спирин]

vladislavprozorovskiy, а нет там написано про свойства объекта. Перепутал.)