Arbitrary number of components in a JSX piece of code

Question

I have this React code defining optionTemplate which is intended to be passed as a prop of a React component.

  const optionTemplate = (option) => {
    return (
      <div
        className="flex align-items-center gap-2"
        style={{ fontSize: "1.5rem" }}
      >

        {option[props.optionGroupChildren[0]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}
        {option[props.optionGroupChildren[1]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}

        {option[props.optionLabel] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}
        <span style={{ fontSize: "1.5rem" }}>{option[props.optionLabel]}</span>
        <span style={{ fontSize: "1.5rem" }}>{option[props.optionGroupLabel]}</span>
      </div>
    );
  };

Observe this piece of code:

        {option[props.optionGroupChildren[0]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}
        {option[props.optionGroupChildren[1]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}

The number of elements of props.optionGroupChildren can be arbitrary so I would like to generalize:

        {option[props.optionGroupChildren[0]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}
        {option[props.optionGroupChildren[1]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}
        .......
        {option[props.optionGroupChildren[n]] && (
          <i
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
          />
        )}

I googled "jsx for loop" but I have not been convinced that what I found was appropriate for my situation.

@cmgchess But a map will create an array whose elements are separated by commas, no? Here there are no separator. — Stéphane Laurent, May 16 '23 at 13:54
@cmgchess I don't understand your latest comment. What do you mean by "lists"? — Stéphane Laurent, May 16 '23 at 13:56
@StéphaneLaurent - You'd get commas between elements if you converted an array to a string (`String(theArray)`), but React doesn't do that. More here: https://react.dev/learn/rendering-lists#rendering-data-from-arrays — T.J. Crowder, May 16 '23 at 14:00
At least related, possible duplicate target: https://stackoverflow.com/questions/32157286/rendering-react-components-from-array-of-objects — T.J. Crowder, May 16 '23 at 14:03

T.J. Crowder · Accepted Answer · 2023-05-16T13:59:26.700

You'd use map for that (more in the React documentation), something like this although I didn't see where you were using the value of option[props.optionGroupChildren.map[n]] (unless it's really only used for the && guard):

{props.optionGroupChildren.map((child) => {
    const element = option[child];
    return element && (
        <i
            key={appropriateKeyHere}
            className={option.icon.icon}
            style={{ color: option.icon.color, fontSize: option.icon.size }}
        />
    );
)}

Note the key, which is essential on arrays so React can keep track of elements as they move around. Don't just use the index of the element as the key, it's not sound unless the array never changes. (More here.)

You mean 'element = option[child]`? – Stéphane Laurent May 16 '23 at 13:58 — Stéphane Laurent, May 16 '23 at 13:58

score 0 · Answer 2 · answered May 16 '23 at 14:08

As stated by @cmgchess you could use maps in order to render your list.

As shown in the documentation.

The map function could be seen as a for loop, like in those simple examples:

const list = [1, 2, 3];

for(let item of list) {
    console.log(item);
}

list.map(item => console.log(item));

Both methods will return the same output, since internally the map function iterates throught the itens in a list and runs them against the callback.

Therefore you could use map as something like:

{props.optionGroupChildren.map(child => {
  {option[child] && (
    <i
      className={option.icon.icon}
      style={{ color: option.icon.color, fontSize: option.icon.size }}
    /> 
  )}
})}

Arbitrary number of components in a JSX piece of code

2 Answers2