Getting TypeScript compile error when attempting prop drilling of state objects in Ionic/React

Asked
Active3 hr before
Viewed126 times

7 Answers

compilestateerrorreacttypescriptgetting
90%

I’m trying to drill app state down through component props in app.tsx, but get a typescript error:,I set strict to false in tsconfig.json, but I still can’t compile because of the listed error. What am I missing here? Why is it seemingly so difficult to add a prop to a component with TypeScript? Thanks for any help, I am new to Ionic/React/TypeScript., Why do companies interview candidates they don't seem to seriously consider for the role?

In addition, you might want to rename your dailyObd interface to use upper camelcase instead, as this is one of the naming conventions for classes/interfaces.

interface DailyObd {
   title: string;
   completed: boolean;
}

Now, you can provide the generic type parameter for Today.

interface TodayProps {
  dailyObd: DailyObd[];
}

const Today: React.FC<TodayProps> = ({ dailyObd }) => { ... }
load more v
88%

I’m trying to drill app state down through component props in app.tsx, but get a typescript error:,Since it is a page you will be navigating to, you will also need the RouteComponentProps,It points now to the <Today /> component in the route’s render prop as the source of the error.

I’m trying to drill app state down through component props in app.tsx, but get a typescript error:

Type '{ dailyObd: RouteComponentProps<any, StaticContext, {}>; }' is not assignable to type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.
  Property 'dailyObd' does not exist on type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.ts(2322)

Here’s a breakdown of what I’ve got:
app.tsx:

const App: React.FC = () => {
  const [dailyObds, setDailyObds] = useState<dailyObds>([{
    title: 'First',
    completed: false
  }])

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/page/today" render={(dailyObds)=>(<Today dailyObd={dailyObds} /> )} />
            <Redirect from="/" to="/page/Inbox" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  )
}

interface dailyObd{
    title: string
    completed: boolean
}
interface dailyObds extends Array<dailyObd>{}

export default App;

Here’s Today.tsx:

const Today: React.FC = ({ dailyObd })=>{
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"><IonMenuButton /></IonButtons>
          <IonTitle>Today</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonText>Some stuff will go here... eventually.</IonText>>
      </IonContent>
    </IonPage>
  )
}
load more v
72%

I’m trying to drill app state down through component props in app.tsx, but get a typescript error:,Description: Latest posts ,Since it is a page you will be navigating to, you will also need the RouteComponentProps

I installed the plugins…

npm install cordova - plugin - androidx
npm install cordova - plugin - androidx - adapter
ionic cap sync
load more v
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

That is basically what a React hook is. It allows us to use state, refs and other React features in our functional components.,First, let us initialize our React app. (I prefer using create-react-app but you can use whatever method you prefer.),I will discuss this later in the article but this hook basically allows us to consume the value of a context. What this actually means will become more apparent later in the article.

import React, { Component } from "react";
import ThemeContext from "../Context/ThemeContext";
import AppTheme from "../Colors";

class Main extends Component{
    constructor(){
        super();
    }
    static contextType = ThemeContext;
    render(){
        const currentTheme = AppTheme[this.context];
        return(
            <main></main>
        );
    }

}
render() {
        const currentTheme = AppTheme[this.context];
        return (
            <main style={{
                padding: "1rem",
                backgroundColor: `${currentTheme.backgroundColor}`,
                color: `${currentTheme.textColor}`,

            }}>
                <h1>Heading 1</h1>
                <p>This is a paragraph</p>
                <button> This is a button</button>
            </main>
load more v
40%

Pretag
 Pretag team - issue, fix, solve, resolve
22%

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.,If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.,Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "compile-state" queries related to "Getting TypeScript compile error when attempting prop drilling of state objects in Ionic/React"