How to make a react js element by using props?

Question

I have a functional element in react js like this,

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {["Category", "Design", "Size", "Style"].map((ourOption) => (
        <div
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}
          className="filter__options__container"
        >
          <div className="filter__options__button">
            {ourOption}
          </div>
          {isShown && <div className="filter__options__content">  Here I want to return the element using props </div>}
        </div>
      ))}
    </div>
  );
}

I have created a files called, Category.js, Design.js, Size.js, Style.js. Now I want to use the props so that I can concatenate like this <{ourOption}> <{ourOption}/> so that this will return element. Any idea how to do this guys?

Answer 1

Choosing the Type at Runtime

First: Import the components used and create a lookup object

import Category from 'Category';
import Design from 'Design';
import Size from 'Size';
import Style from 'Style';
// ... other imports

const components = {
  Category,
  Design,
  Size,
  Style,
  // ... other mappings
};

Second: Lookup the component to be rendered

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {["Category", "Design", "Size", "Style"].map((ourOption) => {
        const Component = components[ourOption];
        return (
          ...
            <div className="filter__options__button">
              <Component />
            </div>
          ...
        ))}}
    </div>
  );
}

Alternatively you can just import and specify them directly in the array to be mapped.

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {[Category, Design, Size, Style].map((Component) => (
        ...
          <div className="filter__options__button">
            <Component />
          </div>
        ...
      ))}
    </div>
  );
}