How to Change tag name in react js with map

Question

I have a code like this I want to change the tag name starting with <all.

{services.map((item) => (
        <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          <All.${item}
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
      ))}

I tried like this

{services.map((item) => (
        <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          {(`{<All.${item}
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />`)}
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
      ))}

but it didn't worked it showing

I want to render different components. but it renders html of it. — Shashank Singh, Mar 19 '23 at 19:02
https://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name — Konrad, Mar 19 '23 at 19:02
Btw, `it's a tag name, not an attribute https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_element https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes — Konrad, Mar 19 '23 at 19:04

score 0 · Answer 1 · answered Mar 19 '23 at 19:04

0

JSX is not a string, you can't use ${}

{
  services.map((item) => {
    const Component = All[item];
    return (
      <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          <Component
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
    );
  });
}

answered Mar 19 '23 at 19:04

Konrad

21,590
4
28
64

It is showing..... The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. – Shashank Singh Mar 20 '23 at 18:12
@ShashankSingh you didn't really show what is `All`. Seems like `All.something` is not a react component but a string – Konrad Mar 20 '23 at 19:49
Actually I imported some icons from a js file as All. that's why i am using All.item. but even now i have imported them singularly. It is treating Component as a String not referencing to the actual imported icon. – Shashank Singh Mar 21 '23 at 04:08

How to Change tag name in react js with map

1 Answers1