Объект не может отображаться как React Child (ошибка при использовании метода array.filer ())

Question

const dataDisplay = this.state.allData.filter((item)=>{
        if(item.type==="Startup"){
            return(
                <div className="BlockForInvestor">
                    <div className="ImageDiv"><img src={item.link}></img></div>
                    <div className="ContentDiv">
                        <h1 className="Name">{item.name}</h1>
                    </div>        
                </div>
            );
        }
    });

Теперь рендеринг dataDislay приводит к ошибке, что объект не может быть отрендерен как реагирующий дочерний элемент.Почему array.filter возвращает массив объектов.

allData - это массив объектов, в котором каждый объект хранит пользовательские данные

Answer 1

Фильтр возвращает массив элементов, которые удовлетворяли условию в обратном вызове. Вы должны использовать метод map в этом фильтрованном массиве, чтобы преобразовать эти элементы из объектов в визуализируемые React Elements

const dataDisplay = this.state.allData
    .filter(item => item.type === 'Startup')
    .map((item)=>(
                <div className="BlockForInvestor">
                    <div className="ImageDiv"><img src={item.link}></img></div>
                    <div className="ContentDiv">
                        <h1 className="Name">{item.name}</h1>
                    </div>        
                </div>
            );
    });