create react component from string

Question

I have a list of array, I would want to match the string with component name, is that possible? I tried this https://codesandbox.io/s/lpzq3jvjm7

function App() {
  const obj = {
    name: "Name"
  };

  const capitalize = (s) => {
    if (typeof s !== 'string') return ''
    return s.charAt(0).toUpperCase() + s.slice(1)
  }

  return (
    <div className="App">
      {React.createElement(capitalize(obj.name), {
        name: "james"
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

doesn't seem to work, any clue?

@CodeManiac what if I alrdy have the component but it's at other file? codesandbox.io/s/5k41vv116n — Neini Amanda
– Neini Amanda, Commented Mar 7, 2019 at 4:19
You can import from that file import Name from whatever path of that file — Code Maniac
– Code Maniac, Commented Mar 7, 2019 at 4:20

azium · Accepted Answer · 2019-03-07 04:21:48Z

3

It's hard to tell what error you were actually running into since you didn't have a component called Name. Simple fix?

function Name(props) {
  return props.name
}

function App() {
  const obj = {
    name: Name
  };

  return (
    <div className="App">
      {React.createElement(obj.name, {
        name: "james"
      })}
    </div>
  );
}

Prints james on the page.

Update

You are missing a few things.. firstly importing your component

import Name from './Name'

and inside Name.js you were missing the react import

import React from 'react'
export default ({ name }) => <h1>my name is {name}</h1>;

and make sure to set the actual value of Name to your object, not a string `"Name"

const obj = {
  name: Name
};

codesandbox

edited Mar 7, 2019 at 4:21

answered Mar 7, 2019 at 4:16

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

1 Comment

Neini Amanda Over a year ago

I have the Name component,it is at Name.js

Collectives™ on Stack Overflow

create react component from string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related