Error during assignment by destructuring?

Question

JavaScript

class Header{
    constructor(props) {
        let {props: {eventId, renderProps: {circleColor, crossColor}}} = props; // error
        this.circleColor = circleColor
        this.crossColor = crossColor
        this.el = eventId
        this.Render()
    }
}

new Header({props: { el: document.getElementById(event.target.id), renderProps: {circleColor, crossColor} } })
Error - Uncaught TypeError: Cannot read properties of undefined (reading 'props'
) what exactly is the error if this entry works but throws an error :(

Answer 1

When destructuring, all the properties that you destructure must be set, which is why the error

let props = {eventId: 10, renderProps: {circleColor: "red", crossColor: "green"}};
let {eventId, renderProps: {circleColor, crossColor}} = props; // OK

let props = {renderProps: {circleColor: "red", crossColor: "green"}};
let {eventId, renderProps: {circleColor, crossColor}} = props; // Ошибка! не задано свойство enventId

When rendering a component, specify all the properties that you are destructuring.
And yes fix it

let {props: {eventId, renderProps: {circleColor, crossColor}}} = props; // error

on this

let {eventId, renderProps: {circleColor, crossColor}} = props;