CODEWITHSUNDEEP
htmlcssreactjs
Perplexityy
Perplexityy

Reputation: 569

Rendering columns of buttons within div

I have a list of languages, and I want to render them each as buttons within a column, within a div. I want to be able to render them based on a variable I set, buttonsPerColumn.

For example, if I have 40 languages, and four columns, I will render 10 buttons per column. If I have 36 languages, I will render 10 buttons for the first three, and 6 for the remainder. However, I am at a loss for how to do this. I have console logged my desired output, however, I would like this in button form. How can I create all of the column and button divs I need within my method, and then output them all at once?

css

.languageList {
  position: absolute;
  height: 35%;
  width: 25%;
  left: 43%;
  top: 15%;
  background-color: #b6bbf4;
  display: flex;
  justify-content: space-between;
}

.languageColumn {
  position: relative;
  width: 25%;
  height: 100%;
  background-color: red;
}

languagelist.jsx

class LanguageList extends Component {
  render() {
    this.renderButtons();
    return (
      <React.Fragment>
        <div className="languageList">
          <div className="languageColumn" />
        </div>
      </React.Fragment>
    );
  }

  renderButtons = () => {
    let buttonsPerColumn = 6;
    const languages = LanguageList.getLanguages();
    const myArray = LanguageList.arrayFromObject(languages);
    var i, language;
    let column = 0;
    for (i = 0; i < myArray.length; i++) {
      language = myArray[i];
      console.log("Render " + language + " in column " + column);
      if (i == buttonsPerColumn) {
        column++;
        buttonsPerColumn += buttonsPerColumn;
      }
    }
  };

  static arrayFromObject = object => {
    var myArray = [];
    var key;
    for (key in object) {
      myArray.push(key);
    }
    return myArray;
  };

  static getLanguages = () => {
    return {
      Azerbaijan: "az",
      Albanian: "sq",
      Amharic: "am",
      English: "en",
      Arabic: "ar",
      Armenian: "hy",
      Afrikaans: "af",
      Basque: "eu",
      German: "de",
      Bashkir: "ba",
      Nepali: "ne"
    };
  };
}

Link to code sandbox:

https://codesandbox.io/s/practical-chatelet-bq589

Upvotes: 1

Views: 131

Answers (1)

boikevich
boikevich

Reputation: 408

Try this:

import React, { Component } from "react";

class LanguageList extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="languageList">{this.renderButtons()}</div>
      </React.Fragment>
    );
  }

  renderButtons = () => {
    const buttonsPerColumn = 6;
    const languages = LanguageList.getLanguages();
    const myArray = LanguageList.arrayFromObject(languages);
    const columns = [];
    for (let i = 0; i < myArray.length; i++) {
      const columnIndex = Math.floor(i / buttonsPerColumn);
      if (!columns[columnIndex]) columns[columnIndex] = [];
      columns[columnIndex].push(
        <button className="languageButton">{myArray[i]}</button>
      );
    }
    return columns.map((singleColumn, index) => (
      <div key={index} className="languageColumn">
        {singleColumn}
      </div>
    ));
  };

  static arrayFromObject = object => {
    var myArray = [];
    var key;
    for (key in object) {
      myArray.push(key);
    }
    return myArray;
  };

  static getLanguages = () => {
    return {
      Azerbaijan: "az",
      Albanian: "sq",
      Amharic: "am",
      English: "en",
      Arabic: "ar",
      Armenian: "hy",
      Afrikaans: "af",
      Basque: "eu",
      German: "de",
      Bashkir: "ba",
      Nepali: "ne"
    };
  };
}

export default LanguageList;

Upvotes: 1

Related Questions