Как сделать такую разметку на React.js?

Question

[zjoin]

Есть такой код, вроде все должно быть верно, но items не выводит. или есть более простой способ?

let footerColumns = [
   {
     name: "О компании",
     items: {
       route1: "sdf",
       route2: "sdfsdf"
     }
   },
   {
     name: "Потребителям",
     items: {
       route1: "sdf",
       route2: "sdfsdf",
       route3: "qwert"
     }
   }
]

class Footer extends React.Component {
    renderColumnItems(items) {
      console.log(items);
      return (
        <ul>
          {Object.keys(items).map((route) => {
            <li>
              <a href="#">
                {items[route]}
              </a>
            </li>
          })}
        </ul>
      );
}

    render() {
      return (
        <div>
          {footerColumns.map((column) => {
            return (
              <div className="column footer">
                <h3>{column.name}</h3>
                {this.renderColumnItems(column.items)}
              </div>
            );
          })}
        </div>
      );
    }
}

Answer 1

[Леша Федосеев]

const footerColumns = [
   {
     name: "О компании",
     items: {
       route1: "sdf",
       route2: "sdfsdf"
     }
   },
   {
     name: "Потребителям",
     items: {
       route1: "sdf",
       route2: "sdfsdf",
       route3: "qwert"
     }
   }
];

class Footer extends React.Component {
  
  constructor(props) {
    super(props);
  }
  
  
  _renderColumnItems(items) {
    
    // Если есть возможность изначально сделать `items` массивом,
    // то лучше сделать его массивом
    
    let itemsArray = [];
      
    for (let item in items) {
      if (items.hasOwnProperty(item)) {
        itemsArray.push({
          route: item,
          name : items[item]
        });
      }
    }
        
    return (
      <ul>
        {itemsArray.map(item => (
          <li>
            <a href="#">{item.name}</a>
          </li>
        ))}
      </ul>
    );
  }


  render() {
    
    const { columns } = this.props;
    
    return (
      <div>
        {columns.map(column => (
          <div className="column footer">
            <h3>{column.name}</h3>
            {this._renderColumnItems(column.items)}
          </div>
        ))}
      </div>
    );
  }
}

React.render(<Footer columns={footerColumns} />, document.getElementById('app'));

Answer 2

[zjoin]

map of undefined

Comments

[Леша Федосеев]

codepen.io/alexfedoseev/pen/rVdxLP?editors=101

[zjoin]

Леша Федосеев: Огромное спасибо, заработало...хотя код не совсем понятен. Мне нравится React, но на реальном проекте не знаешь что делать с простейшей разметкой.

[Леша Федосеев]

А что именно непонятно?

[zjoin]

Леша Федосеев:

Вот эта часть например

constructor(props) {
    super(props);
  }

[Леша Федосеев]

Это вопрос больше не по React, а по ES6 классам.

Мы расширяем базовый класс Footer extends React.Component, и вызываем конструктор «верхнего» класса (React.Component), передавая ему аргументы, переданные базовому конструктору Footer.

Вот тут более подробно по теме: www.2ality.com/2015/02/es6-classes-final.html#subc...