React Js render элемент списка элементов внутри списка

Question

Привет, я пытаюсь сопоставить элемент <li> с моим списком <ul>.

makelist: function() { 
    var self = this; 
    return _.map(this.state.files, function (val) { 
     return React.createElement('li', { key: val.id }, React.createElement('p', { className: bgSuccess }, val.name, ' ', delButton), progressBar, errorDiv); 

    }); 
}, 

В моей возвращенной заявлении я вызова метода:

return (
     <div className='file-input-controls'> 
      <ul className='file-input-list'> 
       {this.list()} 
      </ul> 
      <TableActionButtons {...actionButtonsOptions} /> 
     </div> 
    ); 

Очевидно, что ul показывает независимо, как я могу только показать список, если есть элементы списка?

Благодаря

Answer 1

Вы можете проверить размер элементов списка, прежде чем вы на самом деле создать ul.

var ul = null; 
var items = this.makelist(); 
if (items.length > 0) { 
    ul = (
     <ul className='file-input-list'> 
      {items} 
     </ul> 
    ); 
} 

return (
    <div className='file-input-controls'> 
     {ul} 
     <TableActionButtons {...actionButtonsOptions} /> 
    </div> 
);