Valid Input Methods: A Guide to Conditional Rendering Controls

Question

I'm trying to enter conditional rendering, but it gives me the error: Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'types'. No index signature with a parameter of type 'number' was found on type 'types'. Rendering is valid when everything is "any".

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState(0)

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

Can anyone help me understand how to add types for this conditional rendering?

I need to understand how to add types for this conditional rendering

Answer 1

When indexing an object, you need to use the keyof operator. From the TypeScript documentation:

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState<keyof types>("0")

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

Answer 2

Your step has type number and cannot be used to index types because types only has 1,2, 3. So you can manually set step to keyof types:

const [step, setStep] = useState<keyof types>(0)

Since step is a number, you also need the key:

interface types {
  0: JSX.Element;
  1: JSX.Element;
  2: JSX.Element;
}
 const component: types = {
      0: <Home />,
      1: <Create />,
      2: <Detail />,
    }
 return component[step] // 没有错误