React & Typescript: Property 'id' does not exist on type 'number'

user_13420601 0
Viewed 1982

Hello everyone who came to help. The code compiles and works, but TypeScript throws an error that Property 'id' does not exist on type 'number'. If you look deep into the hook, you can see that the step property is of type number in its interface.

The error occurs in this entry: step.id

import React, { useEffect, useState } from 'react'
import FirstStep from './steps/firstStep'
import {useForm, useStep} from 'react-hooks-helper'

interface IDefaultData2 {
    id: string
}

const steps : any = [
    {id: 'firstStep'},
    {id: 'secondStep'},
    {id: 'thirdStep'},
    {id: 'confirm'},
    {id: 'success'}
]

const UserForm: React.FC = () => {
    const {step, navigation} = useStep({
        steps,
        initialStep: 0
    })
    
    console.log(typeof(step))       // object
    console.log(typeof(step.id))    // string
    console.log(step.id)            // "firstStep"
    
    return (
        <>
        {
            (() => {
                switch(step.id){
                    case 'firstStep': return <FirstStep/>
                }
            })()
        }
        </>
    )
}

export default UserForm

What doesn't it like?

SOLUTION:

  1. Add
interface useStepType {
    step: any,
    navigation: any,
}
  1. Edit

From

const { step, navigation } = useStep({
        steps,
        initialStep: 0
    })

To

const { step, navigation }: useStepType = useStep({
        steps,
        initialStep: 0
    })

Special thanks to Tomas Gonzalez

typescript reactjs javascript
1 Answers

So the issue is that you are setting step as an object and not as a number,

to solve this create a new interface for type step:

interface stepType {
    id: string,
}
interface useStepType {
   step: stepType,
   navigation: any,
}

and then try to set the step to this type

    const {step, navigation}: useStepType = useStep({
    steps,
    initialStep: 0
})
user_86438040
Related