ReactJS: Возвращение компонента ReactJ в цикл

Question

Я пытаюсь выполнить цикл через массив и вернуть компонент React для каждого элемента. Вызываются функции рендеринга, но ничего не появляется.

class ListOfFoundPages extends Component { 
    constructor(props) { 
    super(props); 
    this._renderList = this._renderList.bind(this); 
    } 
    _renderList(data) { 
    if (data !== null) { 
     // eslint-disable-next-line 
     data.list.map((obj) => { 
     return <ListItem obj={obj} />; 
     }); 
    } 
    } 
    render() { 
    return (
     <ul className="listOfFoundPages"> 
     {this._renderList(this.props.list)} 
     </ul> 
    ); 
    } 
} 

И это компонент должен быть возвращен:

const ListItem = (props) => { 
    return (
    <li> 
     <div className="foundPagesItem"> 
     <img role="presentation" className="searchPageImg" src={props.obj.picture.data.url} /> 
     <span className="searchPageInfo">{props.obj.name} - {props.obj.category}</span> 
     </div> 
     <div className="seperator" /> 
    </li> 
); 
}; 
export default ListItem; 

Answer 1

_renderList функция должна возвращать массив компонентов (результат data.list.map...). В настоящее время он ничего не возвращает. Код должен выглядеть следующим образом:

_renderList(data) { 
    if (data !== null) { 
    // eslint-disable-next-line 
    return data.list.map((obj) => { 
     return <ListItem obj={obj} />; 
    }); 
    } 
}