React Notes

Passing Arguments

export interface IProps {
  children?: React.ReactNode
}

export interface IAppParms extends IProps {
  a: number
  b: string
}

const App = (props:IAppParms) => {
  console.log(`a:${props.a}, b:${props.b}`)  // tslint:disable-line
  const root = React.useContext<RootStore>(RootContext);
  return (
    <div className="App">
    <h2>Childern</h2>
      {props.children}
      <h3>End of Children</h3>
    </div>
  );
};


// using App:
(<App a={13} b='hi'>HERE I GO</App>)

Render function must take only 1 argument thus if more parameters are required, then an interface needs to be defined.

To pass props.children we need to add that to our interface in TypeScript.

More on props in TypeScript.