Почему получаю [object Object] вместо данных?

Question

[Денис Соколов]

changeCategory = (e) => {
        const cardCars = document.querySelector('.card-cars');
        console.log(e.target.id);
        const filteredCotegory = this.state.cars
            .filter((car) => e.target.id === car.category)
            .map((car, index) => {
                console.log(car);
                return (
                    <Car
                        key={index}
                        title={car.title}
                        category={car.category}
                        image={car.image}
                        money={car.money}
                        checkCar={this.checkCarModalHandler}
                        data-category={car.category}
                    />
                );
            });
        cardCars.innerHTML = filteredCotegory;
    };

При этой функции у меня выводит [object Object] хотя надо чтобы выводило карточки с контентом

Comments

[Даша Циклаури]

а где render кода jsx чтобы его вставлять?

[Денис Соколов]

render() {
        return (
            <div className='autopark'>
                <div className='autopark__header'>
                    <div className='autopark-title'>Автопарк</div>
                    <div className='autopark-categorys'>
                        <ul>
                            {this.state.category.map((category, index) => {
                                return (
                                    <Category
                                        key={index}
                                        category={category}
                                        onChangeCategory={this.changeCategory}
                                    />
                                );
                            })}
                        </ul>
                    </div>
                </div>
                <div className='card-cars'>
                    {this.state.cars.map((car, index) => {
                        return (
                            <Car
                                key={index}
                                title={car.title}
                                category={car.category}
                                image={car.image}
                                money={car.money}
                                checkCar={this.checkCarModalHandler}
                                data-category={car.category}
                            />
                        );
                    })}
                </div>
            </div>
        );
    }

Он ниже идет я просто скинул код функции

[WbICHA]

Я не эксперт по реакту, но разве это нормально?

const cardCars = document.querySelector('.card-cars');
...
cardCars.innerHTML = filteredCotegory;

[Gary_Ihar]

Вы как-то неправильно реакт используете