interface states and props in typescript react

Question

I\'m working on a project that uses typescript as well as react and am new to both. My questions is about interface in typescript and how that relates to props and states. What

Answer 1

It's not clear what you're asking exactly, but:

props: are the key/value pairs that are being passed from the parent of the component and a component should not change it's own props, only react to changes of props from the parent component.

state: kinda like props but they are changed in the component itself using the setState method.

the render method is called when the props or state have changed.

As for the typescript part, the React.Component takes two types as generics, one for the props and one for the state, your example should look more like:

interface MyProps {}

interface MyState {
    hero: string;
    whatIs: string;
    aboutOne: string;
    aboutTwo: string;
    testimonial: string;
    footer: string;
}

class Root extends React.Component <MyProps, MyState>  {
    constructor(props) {
        super(props);

        this.state = {
            // populate state fields according to props fields
        };
    }

    render() {
        return (
            <div>
                <NavBar/>
                <Jumbotron content={ this.state.hero } />
                <ContentPanel content={ this.state.whatIs } />
                <ContentPanel content={ this.state.aboutOne } />
                <ContentPanel content={ this.state.aboutTwo } />
                <ContentPanel content={ this.state.testimonial } />
                <Footer content={ this.state.footer } />
            </div>
        )
    }
}

As you can see, the MyState interface defines the fields which are later used in the component this.state member (I made them all strings, but they can be anything you want).

I'm not sure whether or not those fields actually need to be in state and not in props, but that's you call to make.