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)

8/22/24 /g/xampp8/htdocs/laravel/StudentTodo/ionic-rowley/ionic-rowleyV2

        <Multiplication
          questions={questions}

 

was gettting this error at questions=

src/components/advanced/Advanced.tsx:314:11 - error TS2322: Type '{ questions: any; setQuestions: Dispatch<any>; currentQuestionIndex: number; checkInput: (e: any) => void; checkAnswer: () => void; itemsRef: MutableRefObject<{ Arr: never[]; }>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'questions' does not exist on type 'IntrinsicAttributes'.

SOLUTION: Change Multipication component to add the type. Solution found at https://dev.to/mconner89/passing-props-in-react-using-typescript-20lm

FROM:

const Multiplication: React.FC = ({
  questions,
  setQuestions,
  currentQuestionIndex,
  checkInput,
  checkAnswer,
  itemsRef,
}: any) => {
 

 

TO

 

interface MathProps {
  questions: any,
  setQuestions: any,
  currentQuestionIndex: any,
  checkInput: any,
  checkAnswer: any,
  itemsRef: any,


}

const Multiplication: React.FC<MathProps> = ({
  questions,
  setQuestions,
  currentQuestionIndex,
  checkInput,
  checkAnswer,
  itemsRef,
}: any) => {

 

 

 

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