React axios test

Shows how to retrieve a list of TODOs from a public API

by Nicolas Mancilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.min.js"></script>
<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 = {
    	items: []
    }
    this.doneLoading = this.doneLoading.bind(this);
  }
  
  doneLoading(response) {
  	console.log(response);
  	const data = response.data.map(i => {
    	return {
      	text: i.title,
        done: i.completed,
        id: i.id
      };
    });
    this.setState({
      	items: data
    });
  }
  
  componentDidMount() {
  	axios.get('https://jsonplaceholder.typicode.com/todos')
		.then(this.doneLoading)
		.catch(e => console.error('Failed to retrieve the data:', e));
  }
  
  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.items.map(item => (
          <li key={item.id}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} /> 
              <span className={item.done ? "done" : ""}>{item.text}</span>
            </label>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

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