Creating generic components in React Javascript

Question

I'm trying to build a React select component that can support multiple different child component types.

I'd like to do something like this:

export const GenericSelect = (props) => {
  const { component, items } = props;
  return <>{items && items.map((item, index) => <component id={items.id} name={item.name} />)}</>;
};

And then be able to use it like:

<GenericSelect component={NonGenericCard} items={items} />

Where NonGenericCard supports a fixed set of properties (e.g., id, name), which will be populated from values in the items object.

I tried this, but it doesn't seem like it can create the <component/> at run-time.

Is this possible in Javascript? If so, how can it be accomplished?

component must be capitalized => Component. Change the name of your prop. Lowercase component names are not allowed as they get confused with the native elements like div, or p. — k.tten
– k.tten, Commented Sep 1, 2022 at 19:14

Abito Prakash · Accepted Answer · 2022-09-01 19:27:30Z

3

In JSX, lower-case tag names are considered to be HTML tags. So you should use Component instead of component.

Also id should be item.id instead of items.id and you should give each element a key.

export const GenericSelect = (props) => {
  const { Component, items } = props;
  return (
    <>
      {items &&
        items.map((item, index) => (
          <Component key={item.id} id={item.id} name={item.name} />
        ))}
    </>
  );
};

<GenericSelect Component={NonGenericCard} items={items} />

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

edited Sep 1, 2022 at 19:27

answered Sep 1, 2022 at 19:14

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Creating generic components in React Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related