1

I am trying to dynamically name some providers in react. I am getting the following errors:

The tag First.Provider is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

And

First.Provider is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I am not sure how to go about naming these components. I have tried answers at the question Here but I am looping and nesting components so I need a beginning and ending tag so I don't think React.createElement will work and most of the answers in the above link are manually naming the component and I need to dynamically name the component corresponding to the value in an object. Here is my code:

{Object.keys(state)
  .reverse()
  .reduce((acc, item) => {
    const Tag = `${item}.Provider`;
    return <Tag>{acc}</Tag>;
  }, props.children)}
user3331344
  • 728
  • 8
  • 23
  • There are a variety of different approaches in duplicate link above – charlietfl Mar 30 '19 at 02:46
  • Looks like your `Tag` variable is just an interpolated string. The proper way would be something like this: `Tag = item[Provider]` to get the `Provider` value from the `item` object – Trevor Johnson Mar 30 '19 at 04:58

0 Answers0