interface states and props in typescript react

Question

I'm working on a project that uses TypeScript as well as React and I am new to both. My question is about interface in TypeScript and how that relates to props and states. What is actually happening? My application doesn't run at all unless I declare interface props and states, but I'm 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.

Susa

I'm also struggling with this pattern, and wonder how to pass the interfaced props (MyProps here) to the Root component from the outside - when the component is created within the jsx. Sadly the accepted answer does not show that part. – Trembly

UPDATE: found it, you use the propName = {...} syntax. Just in case someone has the same struggle. – Trembly

the error (which u can paste to elaborate on the question) might be about typescript demanding an interface for properties (typescriptlang.org/docs/handbook/interfaces.html) e.g. see this answer https://mcmap.net/q/202609/-using-state-in-react-with-typescript – Paling

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 your call to make.

Rhesus

Thanks, this answers everything for me. – Susa

what is the use of MyProps? – Mechanize

@BahadurSinghDeol The type of the react component properties. In this example it's empty, but you can put whatever you need. – Rhesus

The problem is I can another filed to class state which is not in interface and work with it and the project tun without any Type checking? – Dhiren

<MyProps, MyState> helped me a lot! – Salo

You also should define the constructor like this: constructor(props: MyState | Readonly<MyState>) { – Endearment

@Endearment no, the props are not of type MyState, they are of type MyProps – Rhesus

@NitzanTomer Sorry don't know what I was thinking there. I meant constructor(props: MyProps | Readonly<MyProps>) { like you say. – Endearment