JSFiddle - React, Tailwind, and code Playground

by james gotsell

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<ul>

</ul>

Babel + JSX

const items1 = [1,2,3,4,5,6];
const mapped1 = items1.map(function (items1){
		return items1 * 2
});

console.log(mapped1)

const items = [
{
	active: true,
	firstname: 'Shane',
	lastname: 'Osbourne'
},
{
active: true,
firstname: 'Sally',
lastname: 'Osbourne'
},
{
active: false,
firstname: 'Ben',
lastname: 'Barker'
}
];

const mapped = items
.filter(x => x.active) //
.map(x => x.firstname); // ['Shane', 'Sally']

console.log(createHtmlList(mapped));

function createHtmlList(items) {
const listElements = items.map(x => <li>${x}</li>).join('\n');
return <ul>\n${listElements}\n</ul>;
}