score:1

Accepted answer

You need to provide the typings for your Today component. From what I can see, the Today component accepts dailyObd as the props, so you will need to create an interface or type genetic for the component.

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 }) => { ... }

score:0

I seem to have resolved the next issue which popped up after I applied typing to the Today component as wentjun suggested. Following the comments on wentjun's answer, I eventually found that in the route's render prop, the variable passed into the anonymous function is not the state variable that I had created, despite it sharing the same name. When I removed that variable from the anonymous function declaration, I found that the state variable that I created was then being passed into the Today component as it was created and the application is working as expected now. Here's the TS I settled on:

App.tsx:

const App: React.FC = () => {

  const [dailyObds, setDailyObds] = useState<DailyObd[]>([{
    title: 'first',
    completed: false
  },{
    title: 'second',
    completed: true
  }])

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

interface DailyObd{
  title: string
  completed: boolean
}

export default App

Today.tsx:

const Today: React.FC<Today> = (dailyObdsProp)=>{
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"><IonMenuButton /></IonButtons>
          <IonTitle>Today's Obds</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonText>
          {
            dailyObdsProp.dailyObdsProp.map(
              obd=>(
                <p>{obd.title} - {obd.completed ? 'Completed' : 'Uncomplete'}</p>
              )
            )
          }
        </IonText>
      </IonContent>
    </IonPage>
  )
}

interface Today{
  dailyObdsProp: DailyObd[]
}
interface DailyObd{
  title: string
  completed: boolean
}
export default Today

Thanks everyone for your help! Please let me know if there's an issue with this solution.


Related Query

More Query from same tag