React

by Gabriel Correa

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;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	data: {
    	  success: true,
        bookings:[
          {
              _id:"5d680fcbea5181b486ddfbcd",
              user:"5d680dc1010e60b38f6f7423",
              active_guest:{
                  language:"PT-BR",
                  finger:"",
                  concierge:false,
                  active:true,
                  _id:"5d68103bea5181b486ddfbce",
                  first_name:"Thomas",
                  last_name:"Vieira",
                  email:"[email protected]",
                  bookings:{
                      active:true,
                      _id:"5d68103bea5181b486ddfbcf",
                      room:"A5",
                      date_prevision:"2019-06-04T18:00:00.000Z",
                      status:"Await",
                      created:"2019-08-29T17:49:47.900Z",
                      modified:"2019-08-29T17:49:47.900Z"
                  }
              }
          },   
          {
              _id:"5d680fcbea5181b486ddfbcd",
              user:"5d680dc1010e60b38f6f7423",
              active_guest:{
                  language:"PT-BR",
                  finger:"",
                  concierge:false,
                  active:true,
                  _id:"5d68103bea5181b486ddfbce",
                  first_name:"Gabriel",
                  last_name:"Oliveira",
                  email:"[email protected]",
                  bookings:{
                      active:true,
                      _id:"5d68103bea5181b486ddfbcf",
                      room:"Z9",
                      date_prevision:"2019-06-04T18:00:00.000Z",
                      status:"Completed",
                      created:"2019-08-29T17:49:47.900Z",
                      modified:"2019-08-29T17:49:47.900Z"
                  }
              }
          },   
          {
              _id:"5d680fcbea5181b486ddfbcd",
              user:"5d680dc1010e60b38f6f7423",
     ...