Как добавить еще одну переменную в со строкой?

Question

[godsplane]

Я в реакте почти не шарю и возможно я даже не правильно сформулировал вопрос.




Есть "переменная" в которой забита инфа, как мне для одного блока сделать несколько таких в колонку?Нужно ли выводить для этого еще один "term"? только с другим названием?Или можно как то в один это упихнуть?

Answer 1

[Mikhail Rerberg]

Привет!

Во-первых, данные типа { title, term } ты можешь положить в массив и создать компоненты, промапавшись по массиву, проще будет и кода меньше.
Во-вторых, тебе никто не мешает `term` сделать объектом или массивом.

Возможно, я не совсем понял, что ты хочешь, в таком случае, опиши нагляднее или псевдокодом

Comments

[godsplane]

Буду благодарен если подскажете как это сдлетаь

Answer 2

[Сергей Сунцев]

Тут нужно скорее знание не реакта, а объектов.
Вот то, что ты отдаешь в параметре data ты отдаешь в виде объектов title и term.
Собственно внутри компонента TrainBox2 ты к ним обращаешься через параметр props.data

Ты можешь в объекте data создать ещё одни объект (к примеру term2), тогда внутри будет обращение props.data.term2

<TrainBox2 data={{title=" something text", term : "some term", term2 : "some term 2"}} />

внутри

<div className="one_floor_top">
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term}</div>
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term2}</div>
</div>

Либо создать ещё один параметр, тогжа внутри уже обращайся, как props.data2.term

<TrainBox2 
  data={{title=" something text", term : "some term"}} 
  data2={{title=" something text", term : "some term"}}
/>

внутри

<div className="one_floor_top">
  <div className="floor_big">{props.data.title}</div>
  <div className="floor_small">{props.data.term}</div>
  <div className="floor_big">{props.data2.title}</div>
  <div className="floor_small">{props.data2.term}</div>
</div>

PS. не надо больше кода - скриншотами, это плохо, неудобно и неправильно, договорились?

Comments

[godsplane]

Да это я понимаю но как мне не повторять вот это term,term2,term3 и тд? Как это все запихать в некий массив?

[Сергей Сунцев]

godsplane, лучше всего циклом.
У вас есть допусти массив данных

const arr = [
{title : 'title1', term : "term1"},
{title : 'title2', term : "term2"},
{title : 'title3', term : "term3"},
{title : 'title4', term : "term4"}
]

и где то в компоненте вы возвращаете

{arr.map((item, key) => <TrainBox2 
  title={item.title} 
  term={item.term}
/>)}

[Mikhail Rerberg]

В твоем случае может даже

const arr = [
{title : 'title1', term : { f: '123', s: '123' ...}},
]