How to render listing for multiple elements in React?

Question

Looking for solution to render const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"]; to <div className="segment">. Does it possible to make render listing for the input label elements.

Demo: https://codesandbox.io/s/536wmpj3mp

export class Segment extends React.Component {
  render() {
    const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"];
    return (
      <div className="segment">
        <input type="radio" id="day-1" name="day" value="Tay 1" />
        <label className="segment-button" htmlFor="day-1">
          day 1
        </label>
        <input type="radio" id="day-2" name="day" value="Tay 2" />
        <label className="segment-button" htmlFor="day-2">
          day 2
        </label>
        <input type="radio" id="day-3" name="day" value="Tay 3" />
        <label className="segment-button" htmlFor="day-3">
          day 3
        </label>
        <input type="radio" id="day-4" name="day" value="Tay 4" />
        <label className="segment-button" htmlFor="day-4">
          day 4
        </label>
        <input type="radio" id="day-5" name="day" value="Tay 5" />
        <label className="segment-button" htmlFor="day-5">
          day 5
        </label>
      </div>
    );
  }
}

score 2 · Accepted Answer · edited Mar 06 '18 at 21:33

2

You can map elements like :

import React from "react";

export class Segment extends React.Component {
  render() {
    const days = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"];

    return (
       <div className="segment">
       {
         days.map((d, i) => {
          return(
            <div>
              <input type="radio" id={`day-${i + 1}`} name="day" value={`Tay ${i + 1}`} />
              <label className="segment-button" htmlFor={`day-${i}`}>{d}</label>
            </div>
           )
         })
        }
       </div>
    );
  }
}

edited Mar 06 '18 at 21:33

Mo.

26,306
36
159
225

answered Mar 06 '18 at 20:24

Striped

2,544
3
25
31

there is an error when apply your answer which is `ReferenceError $ is not defined` – Mo. Mar 06 '18 at 20:37
Try `'day-' + 1` within your console. – Striped Mar 06 '18 at 20:49
@ReyHaynes the things is that `const days` can't change because it is coming form API – Mo. Mar 06 '18 at 20:49
@ReyHaynes And in what is it an issue for the script, I don't understand ? – Striped Mar 06 '18 at 20:51
@Striped Sorry, didn't see the `i` for some reason. This should work. – ReyHaynes Mar 06 '18 at 20:53
@ReyHaynes final result coming like this `
` – Mo. Mar 06 '18 at 21:02
@Striped The bracket was missing – Mo. Mar 06 '18 at 21:33
@Muhammed Sorry for the missing brackets and thanks for the edit. – Striped Mar 07 '18 at 03:47

How to render listing for multiple elements in React?

1 Answers1