React with TypeScript - define defaultProps in stateless function

Question

I\'m using React with TypeScript and I\'ve created stateless function. I\'ve removed useless code from the example for readability.

interface CenterBoxProps exte         


        

Answer 1

I believe a better way than described in the React docs is simply to use Javascript / Typescript default arguments.

There's an answer here: https://stackoverflow.com/a/54569933/484190 but for convenience, here's an example:

import React, { FC } from "react";

interface CompProps {
  x?: number;
  y?: number;
}

const Comp: FC = ({ x = 10, y = 20 }) => {
  return 
{x}, {y}
;
}

export default Comp;

This will allow Typescript to know that you don't have to provide the prop, and also that it will never be "undefined" inside your component