How to make such markup in React.js?

Question

JavaScript

There is such a code, everything seems to be correct, but items does not display. or is there an easier way?

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

map of undefined