Creating a React component with Typescript

Question

I'm learning typescript lately, and I have to convert a fake react component to typescript, using the good practice.

For the moment I have something like that

import axios from "axios";
import { useEffect, useState } from "react";



//var component = (props: any) => {
export default const component = (props: any) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};

//export default component;

I know that I should use the Typescript interface system, but I don't really know how to implement it. If there is a typescript expert, I would love some advices...

Answer 1

You could start of with replacing the Props. The useEffect and useState calls cannot be placed inside if statements so have to be moved.

import {FC} from "react";

interface IProps {
    isLists: boolean;
    lists: { text: '' }[];
    show: boolean;
}

const MyComponent: FC<IProps> = ({isLists, lists, show}) => {
    let listeOuNon = 0;
    const [trad, ajoutTrad] = useState('');

    useEffect(() => {
        if (isLists) {

            (async () => {

                axios.get("/api/trad").then((reponse) => {
                    if (reponse.status == 200) {
                        ajoutTrad(reponse.data);
                    }
                });
            })();
        }
    }, [isLists]);

    if (!show) {
        return null;
    }

    return (
        <div>
            {isLists ? (
                <div>
                    <div>le super titre {trad}</div>
                    <div>
                        <ul>
                            {listes.map((elements: any) => (
                                <li>{elements.text}</li>
                            ))}
                        </ul>
                    </div>
                </div>
            ) : (
                <div>
                    <div>le super titre</div>
                    <div>Bonjour tout le monde</div>
                </div>
            )}
        </div>
    );
};

export default MyComponent;

Answer 2

You can use types and/or interfaces:

import axios from "axios";
import { useEffect, useState } from "react";

interface List {
  // your fields here
}

type Props = {
  lists: List[];
  isLists: boolean;
  show: boolean;
}

export default const component = (props: Props) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};

Answer 3

Here is a simple example of a typescript component

interface ComponentProps {
  organisationId: string;
}

const Component: React.FC<ComponentProps> = (props) => {
  return ();
}