#How to add line-break in astro component loop?

5 messages · Page 1 of 1 (latest)

wise stream
#

With this loop:

                      {distinctTotalChampionshipWins.map((totalChampionshipWins) => {
                        const id = `total-championship-wins-${totalChampionshipWins}-filter`
                        const name = `total-championship-wins-filter`
                        return (
                          <li class="list-inline-item mb-0">
                            <input type="checkbox" id={id} name={name} class="btn-check" autocomplete="off" value={totalChampionshipWins} />
                            <label for={id} class="btn btn-sm btn-light btn-primary-soft-check">
                              {totalChampionshipWins}<i class="bi bi-star-fill ms-2"></i>
                            </label>
                          </li>
                        )
                      })}

the output is like:

<li class="list-inline-item mb-0">
                            <input type="checkbox" id="total-championship-wins-0-filter" name="total-championship-wins-filter" class="btn-check" autocomplete="off" value="0">
                            <label for="total-championship-wins-0-filter" class="btn btn-sm btn-light btn-primary-soft-check">
                              0<i class="bi bi-star-fill ms-2"></i>
                            </label>
                          </li><li class="list-inline-item mb-0">
                            <input type="checkbox" id="total-championship-wins-1-filter" name="total-championship-wins-filter" class="btn-check" autocomplete="off" value="1">
                            <label for="total-championship-wins-1-filter" class="btn btn-sm btn-light btn-primary-soft-check">
                              1<i class="bi bi-star-fill ms-2"></i>
                            </label>
                          </li>...

Note the opening <li> is directly behind the previous closing </li>.

Is there a way to force each new <li> in the loop on a new line?

strange cairn
#

what if you insert a {'\n'} between them?

wise stream
#

Hi @strange cairn thx for your reply.
I tried:

{distinctTotalChampionshipWins.map((totalChampionshipWins) => {
  const id = `total-championship-wins-${totalChampionshipWins}-filter`
  const name = `total-championship-wins-filter`
  return (
    <li class="list-inline-item mb-0">
      <input type="checkbox" id={id} name={name} class="btn-check" autocomplete="off" value={totalChampionshipWins} />
      <label for={id} class="btn btn-sm btn-light btn-primary-soft-check">
        {totalChampionshipWins}<i class="bi bi-star-fill ms-2"></i>
      </label>
    </li>
    {'\n'}
  )
})}

but unfortunately it complains about:
Expected ")" but found "{"

strange cairn
#

btw what do you need that for? kind of unusual to want that behavior (afaik)