pass JSON string to create tag React.createelement

Question

I have a JSON string created by API:

var appStructure = {
    "code": 200,
    "message": "Register Form Loaded.",
    "response": "'div',{},'Registration'"
};

I want to create element dynamically using the API response. I am trying to do something like this:

var testCard1 = React.createElement(appStructure.response);
ReactDOM.render(testCard1, document.getElementById('main-content'));

But it keep giving me the error

Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('h1',{},'Hello Testing') is not a valid name.

Metalik · Accepted Answer · 2018-06-23 11:48:52Z

2

appStructure.response is string and can't be passed into createElement method as arguments. You should change string to acceptable arguments. Also testCard1 should be in PascalCase: TestCard1

var args = appStructure.response.split(',');
var TestCard1= React.createElement(args[0].replace(/\W/g, ''), JSON.parse(args[1]), args[2].replace(/\W/g, ''));

edited Jun 23, 2018 at 11:48

answered Jun 23, 2018 at 11:36

Metalik

9431 gold badge10 silver badges30 bronze badges

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

1 Comment

Surbhi Gupta Over a year ago

Thanks. I have another issue, i am creating form and inputes using api response but form tag is closed just after open, i want that form tag should close at the last input button. I am using React.createElement in loop and applying this state on all inputes coming, so everything is working fine but form tag is closed at the time of open and other inputes are placed outside that form

Collectives™ on Stack Overflow

pass JSON string to create tag React.createelement

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