React Typescript : Initialize Default Value of Object Array Inside Another Object

Question

I have an Object named Parent and it has an array of another object named Child and I dont know how to give its initial value when called in state of a component class. I tried to casting it with as Child[] but it still doesn't work

Parent :

export interface Parent {
    id: string,
    child : Child[]
}

State in Component

interface State {
    parent: Parent
}

How I initialize the value

constructor(props: Props) {
    super(props);
    this.state = {
        parent: {
            id: "",
            child: [] as Child[]
        }
    }
}

Thank You.

What you have is correct, and the as Child[] is unecessary. — Aluan Haddad
– Aluan Haddad, Commented Jun 10, 2020 at 10:53

Maxali · Accepted Answer · 2020-06-10 11:47:01Z

1

You can define the type of your state in class definition:

View in the TypeScript Playground


export interface Parent {
    id: string,
    child : Child[]
}
interface State {
    parent: Parent
}
interface Props {
}

class MyComponent extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            parent: {
                id: "",
                child: []  // you don't have to define type 
                           // typescript infers State interface in this.state
            }
        }
    }


    render() {
        return (<div>...</div>)
    }

}

Within TypeScript, React.Component is a generic type (aka React.Component), so you want to provide it with (optional) prop and state type parameters:

Collectives™ on Stack Overflow

React Typescript : Initialize Default Value of Object Array Inside Another Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related