JSFiddle - React, Tailwind, and code Playground

by teneff

Babel + JSX

let data = {"menu": {
    "header": "SVG Viewer",
    "items": [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        {"id": "Help"},
        {"id": "About", "label": "About Adobe CVG Viewer..."}
    ]
}};

class Test extends React.Component {

	render() {
  	return <ul>
  	  {data.menu.items.map((item, key) => 
        <li>{item.label || item.id}</li>
      )}
  	</ul>
	}
}

React.render(<div><SearchableList data="data" /></div>, document.body)