React Todo List

Starting point for creating JSFiddles with React.

by Gabriel Correa

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
</div>

Babel + JSX

class Button extends React.Component {
	style() {
  	return {
      padding: 10,
      backgroundColor: this.props.color,
      color: 'white'
    };
  }

	render() {
  	return <button style={this.style()} onClick={this.props.onClick}>
      {this.props.children}
    </button> 
  }
}

class TaskInput extends React.Component {
	style() {
  	return {
    	padding: 10,
    }
  }
	
	render() {
  	return <input
      style={this.style()}
      placeholder="New Task..."
      value={this.props.value}
      onChange={this.props.onTitleChange}  
    />
  }
}

class NewTask extends React.Component {
	constructor() {
  	super();
    this.state = {
    	newTitle: '',
    }
    this.onTitleChange = this.onTitleChange.bind(this);
    this.addTask = this.addTask.bind(this);
  }
  
  onTitleChange(evt) {
  	this.setState({ newTitle: evt.target.value });
  }
  
  addTask() {
  	this.setState({ newTitle: '' });
  	this.props.onNewTask(this.state.newTitle);
  }
  
	render() {
  	return <div>
  	  <TaskInput value={this.state.newTitle} onTitleChange={this.onTitleChange} />
      <Button onClick={this.addTask} color="green">Create New</Button>
  	</div>
  }
}

class Task extends React.Component {
	constructor() {
  	super();
    this.removeItem = this.removeItem.bind(this);
  }
	containerStyle() {
  	return {
    	paddingLeft: 15,
      paddingTop: 10,
      fontSize: 18,
    }
  }
  
  textStyle() {
  	return {
    	display: 'inline-block',
    	width: 150,
    }
  }
  
  removeItem() {
  	this.props.removeTask(this.props.children);
  }
  
  render() {
  	return <div style={this.containerStyle()}>
        <span style={this.textStyle()}> - {this.props.children} </span>
        <Button onClick={this.removeItem} color="red">Remove</Button>
      </div>
  }
}

class TasksList extends React.Component {
	render() {
  	let todoList = [];
    let key = 0;
    for (let task of this.props.tasks) {
    	todoList.push(
      	<Task key={key++} removeTask={this.props.onRemovetask}>
         ...