Rendering React In A Conditional For Loop

I have a static information in web page. class MyStaticWebPage extends React.Component { render() { return (

Solution 1:

Given you have a flat array but want to render it in rows of three the first thing you should do is chunk the array. Lodash has a method for this or you can do a simple enough reduce on your array.

const chunkedArray = icons.reduce((reduction, icon, index) => {
  index % 3 ? reduction[reduction.length - 1].push(icon) : reduction.push([icon])
  return reduction
}, [])

Now you have your data in the right shape we can easily map that to output jsx.

classIconListWrapperextendsReact.Component {
  render() {
    const { subList } = this.propsconst buttonTypes = ['LeftButton', 'CenterButton', 'RightButton']
    constElement = buttonTypes[index]
    return (
      <IconListContainer>
        {subList.map((icon, index) => <ElementIcon={MyIcon1}color="#ffffff"text="text1"
          />)}
      </IconListContainer>
    );
  }
}

classMyStaticWebPageextendsReact.Component {
  render() {
    return (
      <TopContainer>
        {chunkedArray.map((subList) => <IconListWrappersubList={subList} />)}
      </TopContainer>
    );
  }
}

Solution 2:

I think you're asking how to make sure you group the icons into groups of three using LeftButton, CenterButton, and RightButton.

I'll assume you start with something like this:

var icons = [
  {
    icon: 'MyIcon1',
    color: '#ffffff',
    text: 'text1'
  },
  {
    icon: 'MyIcon2',
    color: '#eeeeee',
    text: 'text2'
  },
  {
    icon: 'MyIcon3',
    color: '#dddddd',
    text: 'text3'
  },
  {
    icon: 'MyIcon4',
    color: '#cccccc',
    text: 'text4'
  }
];

then, see comments:

classMyStaticWebPageextendsReact.Component {
  var buttonTypes = [LeftButton, CenterButton, RightButton];
  render() {
    var rows = [];
    var children = [];
    for (var i = 0; i < icons.length; i++) {
      // x will be 0, 1, or 2var x = i % 3;
      // Get the button type to usevar buttonType = buttonTypes[x];
      // Create the button using `createElement`
      children.push(React.createElement(buttonType, icons[i]);
      // If this is the last button of three, add these in a container// and get a new array for childrenif (x == 2) {
        rows.push(<IconContainer>{children}</IconContianer>);
        children = [];
      }
    }
    // Handle any remaining childrenif (children.length) {
      rows.push(<IconContainer>{children}</IconContianer>);
    }
    return (
      <TopContainer>
        {rows}
      </TopContainer>
    );
  }
}

Solution 3:

As pointed out in other answers - the loop can be achieved with map function. To display them dynamically, you may wish to take a look at flexbox and use them in css.

Solution 4:

One possible way of writing is like this:

var buttonTypes = [LeftButton, CenterButton, RightButton];

let table = [];
arr.forEach((el, i) => {

  letComponent = buttonTypes[i%3];
  rows.push(
    <ComponentIcon={el.icon}text={el.text}color={el.color}
    />
  )

  if(i%3 == 2) {
    table.push( <IconListContainer> {rows} </IconListContainer> )
    rows = [];
  }
})

if (rows.length) {
  table.push( <IconListContainer> {rows} </IconListContainer> );
}

return (
  <TopContainer>
    {table}
  </TopContainer>
);

Solution 5:

You can try something like this.

const icons = [
  {
    icon: 'MyIcon1',
    color: '#ffffff',
    text: 'text1'
  },
  {
    icon: 'MyIcon2',
    color: '#eeeeee',
    text: 'text2'
  },
  {
    icon: 'MyIcon3',
    color: '#dddddd',
    text: 'text3'
  },
  {
    icon: 'MyIcon4',
    color: '#cccccc',
    text: 'text4'
  }
];

classMyStaticWebPageextendsReact.Component {

  const menu = [
    ({ icon, color, text }) => (<LeftButtonIcon={icon}color={color}text={text} />),
    ({ icon, color, text }) => (<CenterButtonIcon={icon}color={color}text={text} />),
    ({ icon, color, text }) => (<RightButtonIcon={icon}color={color}text={text} />)
  ];

  render() {
    return (
      <TopContainer><IconListContainer>
          {icons && icons.map((icon, i) => menu[i % 3](icon))}
        </IconListContainer></TopContainer>
    );
  }
}