Вывод строки в 1 из n мест по условию?

Question

[alex4answ]

Добрый день, есть простая задачка:
Вывести текст в 1 месте если place = 0, в другом месте если place = 1, в третьем если place = 3 и тп;

Можно решить задачу в лоб, и сделать 2 проверки:

const MyComponent = ({ place, text }) => (
  <div>
     <h1>Какой-то заголовок</h1>
     {place === 0 && <span>{text}</span>}

    <div>
      <h2>Заголовок внизу</h2>
      {place === 1 && <span>{text}</span>}
    </div>
  </div>
 );

с 2 местами еще ок, но у меня может быть ~ 10 таких мест, и плодить копии не хотелось бы.

Как можно реализовать не в лоб ?

Comments

[Сергей Соколов]

Ничего не понятно, но очень интересно.
Не вижу, где фигурирует isFirst, например.

[alex4answ]

Сергей Соколов, отредактировал, забыл поправить, надеюсь так более понятно

[Сергей Соколов]

alex4answ, это JSX темплейт в React?

[Сергей Соколов]

В общем, погуглите про "slot" – это есть и во Vue, и в веб-компонентах, и вероятно, в React.

[alex4answ]

Сергей Соколов, именно здесь да, JSX реакт, но вопрос скорее в отрыве от конкретной либы, но ладно, спасибо)

[WbICHA]

alex4answ, сделай массив texts и обращайся к нему по индексу.

texts = [
  <></>,
  <span>{text}</span>,
  <></>,
  <></>,
];

const MyComponent = ({ texts }) => (
  <div>
     <h1>Какой-то заголовок</h1>
     {texts[0]}

    <div>
      <h2>Заголовок внизу 1</h2>
      {texts[1]}
    </div>
    <div>
      <h2>Заголовок внизу 2</h2>
      {texts[2]}
    </div>
    <div>
      <h2>Заголовок внизу 3</h2>
      {texts[3]}
    </div>
  </div>
 );

Во всяком случае я не очень понимаю как это реализовать через слоты.

[alex4answ]

WbICHA, да, я пока тоже, но как вариант массив с индексами уже что-то )