Ох, сложно на самом деле, я сам Vue разработчик, на React немного работал, но почему у вас в render функции какие-то константы, переменные, деструктуризация? У вас есть state, внутри render используется this.state и получайте доступ куда нужно, для обработки данные создавайте методы и через них проводите операции над массивами,
советую к прочтению
UPD:
нашел видимо ошибку
const cardDataList = Array.from(this.state);
Вы пытаетесь из this.state сделать массив? Или как?
Видимо нужно
const cardDataList = Array.from(this.state.dataCards);
И если заработает
Я честно не компилятор и интерпретатор, но подсказывает что-то что нужно будет вместо:
return(
<div className='card-main'>
{cards}
</div>
)
Сделать:
return(
<div className='card-main'>
{...cards} // Тут вам явно нужно будет либо раскрыть с помощью ... либо снова делать .map,
// хотя можно было намного короче сделать, но вы учитесь, делайте как можете, поэтому попробуйте так
</div>
)