React

by michae1

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

React

// The "DATA"

const orgs = [
  	{name:'Umbrella', id:"1"},
    {name:'Aperture', id:"2"},
]

const users = {
	"1": [
  	{name:'Jack', id:1},
    {name:'John', id:2},
    {name:'Maria', id:3},
  ],
  "2": [
  	{name:'Peter', id:100},
    {name:'Harry', id:200},
    {name:'Dan', id:300},
  ]
}

// An "API"

function getOrganisations() {
  return Promise.resolve(orgs)
}

function getUsers(organisationId) {
  if (organisationId in orgs){
  	return Promise.resolve(users[organisationId])
  }
  return Promise.reject('Oh no')
}



class WidgetApp extends React.Component {
  onChange() {}
  render() {
    return (
      <div>
        Choose user
        <select>
          <option>??</option>
        </select>
        <select>
          <option>??</option>
        </select>
        <button>btn</button>
      </div>
    )
  }
}

ReactDOM.render(<WidgetApp />, document.querySelector("#app"))