Dynamically Rendering a React component

by

You should not put component slug in curly braces:

var Hello = React.createClass({
    render: function() {
        return <this.props.component.slug className="text">
            {this.props.component.value}
        </this.props.component.slug>;
    }
});

React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body);

Here is a working fiddle: http://jsfiddle.net/kb3gN/6668/

Also, you can find JSX Compiler helpful for debugging these kind of errors:
http://facebook.github.io/react/jsx-compiler.html

More Related Contents:

  1. “SyntaxError: Unexpected token < in JSON at position 0"
  2. ReactJS – Does render get called any time “setState” is called?
  3. React onClick function fires on render
  4. React Js conditionally applying class attributes
  5. React – User-Defined JSX Components Not rendering
  6. How to access a child’s state in React
  7. Is there any way to update a specific index from the array in Firestore
  8. How to have conditional elements and keep DRY with Facebook React’s JSX?
  9. How can I force a component to re-render with hooks in React?
  10. Detecting when user scrolls to bottom of div with React js
  11. ES6 array map doesn’t return anything: ReactJS
  12. Executing async code on update of state with react-hooks
  13. Why React Hook useState uses const and not let
  14. Controlled vs uncontrolled components in React
  15. How to change the value of a Context with useContext?
  16. How target DOM with react useRef in map
  17. Event target is null inside functional setState
  18. React Hooks Error: Hooks can only be called inside the body of a function component
  19. Sort an array of objects in React and render them
  20. How can I update an object inside of an array in firestore? [duplicate]
  21. Increase JavaScript Heap size in create-react-app project
  22. Global state in React Native
  23. At what nesting level should components read entities from Stores in Flux?
  24. Polling API every x seconds with react
  25. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  26. How to have nested loops with map in JSX?
  27. Performance penalty of creating handlers on every render with react-hooks
  28. Destructuring of es6 but passing dynamic variable
  29. updateProfile is not a function (Firebase)
  30. How to programmatically fill input elements built with React?

Leave a Comment