Sometimes, we want to render a string as React component.
In this article, we’ll look at how to render a string as React component.
How to render a string as React component?
To render a string as React component, we can put the components we want to render in an object.
Then we can render the components by accessing them from the object with a string as the key.
For instance, we write:
import React from "react";
const Foo = () => <p>foo</p>;
const Bar = () => <p>bar</p>;
const Components = {
Foo,
Bar
};
const FooComponent = Components["Foo"];
export default function App() {
return <FooComponent />;
}
We have the Foo and Bar components.
And we put them Foo and Bar into the Components Object.
Next, we access the Foo component from Components with:
const FooComponent = Components["Foo"];
And finally, we render it with <FooComponent />.
Conclusion
To render a string as React component, we can put the components we want to render in an object.
Then we can render the components by accessing them from the object with a string as the key.
