Dynamically access object with react components in typescript by key

Question

I want to dynamically select a react component from a object with a key

import React, {useState, useEffect} from 'react'
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';
  
const DynamicComponent: React.FC = ({key}) => {  
  const [Component, setComponent] = useState<any>();
  const COMPONENTS = {
    COMPONENT_A: ComponentA,
    COMPONENT_B: ComponentB,
  };

  useEffect(() => {
    if (key) setComponent(COMPONENTS[key])
  }, [key]);

  return Component ? React.createElement(Component) : null;
};

With this i get a type error on COMPONENTS[key]

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ COMPONENT_A: FC<{}>; }'.
No index signature with a parameter of type 'string' was found on type '{ COMPONENT_A: FC<{}>; }'.

How do i type this correctly?

Long Nguyen Duc · Accepted Answer · 2021-10-04 13:54:35Z

1

You need define PropTypes for your component, also type of Key.

import React, {useState, useEffect} from 'react'
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';

type Key = "COMPONENT_A" | "COMPONENT_B"

type Props = { key: Key }
  
const DynamicComponent: React.FC<Props> = ({key}) => {  
  const [Component, setComponent] = useState<any>();
  const COMPONENTS = {
    COMPONENT_A: ComponentA,
    COMPONENT_B: ComponentB,
  };

  useEffect(() => {
    if (key) setComponent(COMPONENTS[key])
  }, [key]);

  return Component ? React.createElement(Component) : null;
};

answered Oct 4, 2021 at 13:54

Long Nguyen Duc

1,3451 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Giorgi Andriadze · Accepted Answer · 2021-10-04 13:57:37Z

1

You're missing default value for useState

You can use null as default value:

useState(null)

Like this:

 const [Component, setComponent] = useState<any>(null);

answered Oct 4, 2021 at 13:57

Giorgi Andriadze

3062 silver badges8 bronze badges

1 Comment

Lalablala Over a year ago

Thanks for looking into it, but that unfortunately does not solve the type error

Lalablala · Accepted Answer · 2021-10-06 07:24:16Z

1

I found the answer here: https://stackoverflow.com/a/55014391

Typing the COMPONENTS object fixed my problem.

import React, {useState, useEffect} from 'react'
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';
  
const DynamicComponent: React.FC = ({key}) => {  
  const [Component, setComponent] = useState<any>();
  const COMPONENTS: {[key: string]: React.FC<any>} = {
    COMPONENT_A: ComponentA,
    COMPONENT_B: ComponentB,
  };

  useEffect(() => {
    if (key) setComponent(COMPONENTS[key])
  }, [key]);

  return Component ? React.createElement(Component) : null;
};

answered Oct 6, 2021 at 7:24

Lalablala

777 bronze badges

Collectives™ on Stack Overflow

Dynamically access object with react components in typescript by key

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related