reactjs - 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 is actually happening? My application doesnt run at all unless I declare interface props and states, but Im using states through the react constructor function and I've seen examples where all of that information would go into 'interface MyProps' or 'interface MyStates' take this code for example

"use strict";

import * as React from 'react'
import NavBar from './components/navbar.tsx'
import Jumbotron from './components/jumbotron.tsx';
import ContentPanel from './components/contentPanel.tsx';
import Footer from './components/footer.tsx';

interface MyProps {}
interface MyState {}
class Root extends React.Component <MyProps, MyState>  {
  constructor(props) {
    super(props);
    this.state = {
      ///some stuff in here

    };
  }
  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>
    )
  }
}
export default Root;

(I've removed the content in this.state just to post on here). Why do i need interface? What would be the correct way to do this, since I think I'm thinking of this in the jsx way and not the tsx way.

question from:https://stackoverflow.com/questions/36745013/interface-states-and-props-in-typescript-react

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.