Question 169606 in Javascript Question posted in
A very good W3school tutorial can be found here.

How many components can be included in a JSX piece of code?

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.

Tags:

2

Answers


  1. 0

    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.)

    Login or Signup to reply.
  2. 0

    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 }}
    /> 
  )}
})}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search