LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  padding-top: 15px;
  background-color: #fcfcfc;
}
.callout {
  margin: 0;
}
.close,
.mark-done {
  transition: opacity 0.3s linear,
    color 0.3s linear;
}
.close:hover {
  color: #DD0000;
}
.mark-done {
  opacity: 0.2;
  margin-right: 30px;
  cursor: pointer;
}
.mark-done:hover {
  opacity: 0.5;
  color: #00DD00;
}
.callout-success {
  text-decoration: line-through;
}
.todo-form {
  padding-top: 15px;
  padding-bottom: 30px;
}
i {
  font-style: normal !important;
}
JS
/**@jsx React.DOM*/

var ToDo = React.createClass({
  render: function() {
    var defaultClass = 'callout';

    defaultClass += this.props.done ? ' callout-success' : ' callout-info';

    return (
      
{this.props.value} ×
) } }); var ToDoList = React.createClass({ getInitialState: function() { return { todos: [, { value:'Be awesome', done: false }, { value:'Learn React', done: true }, { value:'Use JSX in my CodePens', done: true } ] } }, addTodo: function() { var todos = this.state.todos; todos.push({ value: this.state.inputValue, done: false }); this.setState({ todos: todos, inputValue: '' }); // Return false for form return false; }, handleChange: function(e) { this.setState({ inputValue: e.target.value }); }, removeTodo: function(index) { this.state.todos.splice(index, 1); this.setState({ todos: this.state.todos }); }, markTodoDone: function(index) { var todos = this.state.todos; var todo = this.state.todos[index]; todos.splice(index, 1); todo.done = !todo.done; todo.done ? todos.push(todo) : todos.unshift(todo); this.setState({ todos: todos }); }, render: function() { var todos = this.state.todos.map(function(todo, index) { return ( ); }.bind(this)); return (

My Todo List

{todos}
); } }); React.renderComponent(ToDoList(), document.getElementById('main'));

Description

Example of using JSX in the JS panel on CodePen
Term
Tue, 11/28/2017 - 13:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv