Today I learned this way to pass props properties to a component in React Ionic App:

App.tsx

  return (
    <IonApp>
        ...
          <Menu children="Hello There"/>
        ...
    </IonApp>
  );

 

Menu.tsx:

interface Props {
  children: React.ReactNode;
}
const Menu: React.FC<Props> = ({ children }) => {
console.log(`LINE 29 children=`, children);

This is my example that did not work:

Import

import { useParams } from "react-router";

 Declare

const App: React.FC = () => {
  type pageParams = {
    operatorParam: string;
    botNumParam: string;
  };
  const { operatorParam, botNumParam } = useParams<pageParams>();

 JSX

  return (
    <IonApp>
          ...
          <Menu {...useParams}/>
          ...
    </IonApp>
  );
};

But it did not work:I got this error in the console

Uncaught TypeError: useContext(...) is undefined

This will not work:

<Menu params={useParams}/>

You will get this error:

Type '{ params: <Params extends { [K in keyof Params]?: string | undefined; } = {}>() => Params; }' is not assignable to type 'IntrinsicAttributes'.
Property 'params' does not exist on type 'IntrinsicAttributes'.ts(2322)

Resource:

https://stackoverflow.com/a/57312722

/g/xampp8/htdocs/laravel/StudentTodo/ionic-rowley/ionic-rowleyV2/app.tsx

react typescript map() parameters define type of value and object JSX