JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div>Who are the producers at Icelab?</div>

Babel + JSX

// filter
function filterByRole(people, role) {
  return people.filter(x => x.role === role).map(x => x.name)
}

// data
const peeps = [
 { name: "Nick", role: "Developer" },
 { name: "Tobes", role: "Designer" },
 { name: "Jess", role: "Producer" },
 { name: "Narinda", role: "Developer" },
 { name: "Jess", role: "Producer" },
 { name: "Jasmin", role: "Designer" }
];

// render
function render(role) {
  console.log(role)
  role.forEach(x => {
    const node = document.createElement('div')
    node.innerText = '- ' + x
    document.body.appendChild(node)
  })
}

render(filterByRole(peeps, 'Producer'));
render(filterByRole(peeps, 'Designer'));
render(filterByRole(peeps, 'Developer'));