React from json

by cbrwizard

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root">

</div>
<div id="plain">

</div>
<div id="null">

</div>
<div id="array">

</div>

Babel + JSX

const jsonToRender = {
	type: 'main',
  props: {},
  children: {
    type: 'div',
    props: {},
    children: {
			type: 'h1',
      props: {},
      children: 'Title',
    },
  }
}

const arrayJsonToRender = {
	type: 'main',
  props: {},
  children: [
    {
			type: 'aside',
      props: {
      	key: 'asideo',
      },
      children: {
        type: 'h1',
        props: {
        	key: 'h1nested'
        },
        children: 'Elem 1 title',
      },
    },
    {
      type: 'div',
      props: {
				key: 'div',
      },
      children: 'elem2'
    }
  ]
}

const plainJsonToRender = {
	type: 'main',
  props: {},
  children: 'plain'
}

const nullJsonToRender = {
	type: 'main',
  props: {},
  children: null
}

const renderJSON = (json) => {
	// because null is an object
	if (json.children === null) {
  	return React.createElement(json.type, json.props, json.children)
  }
  if (Array.isArray(json.children)) {
   	return json.children.map((child) => renderJSON(child))
  }
  if (typeof json.children === 'object') {
  	return renderJSON(json.children)	
  }
  
  return React.createElement(json.type, json.props, json.children)
}

ReactDOM.render(renderJSON(plainJsonToRender), document.getElementById('plain'))
ReactDOM.render(renderJSON(jsonToRender), document.getElementById('root'))
ReactDOM.render(renderJSON(nullJsonToRender), document.getElementById('null'))
ReactDOM.render(renderJSON(arrayJsonToRender), document.getElementById('array'))