React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by ggenya

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">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

* {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

.task-container__default {
  padding: 10px 20px;
  background-color: #bdc3c7;

  margin-top: 5px;
  width: 100%;
  position: relative;
  border-left: 5px solid #e74c3c;
}

.column-container__default {
  display: inline-block;
  padding: -0 5px;
  margin: 5px 0;
  min-height: 500px;
  width: 300px;
  transition: all 0.25s;
  position: relative;
  background-color: #ecf0f1;
  border-top: 2px solid transparent;
}

.column-container__default:hover {
  border-top: 2px solid #c0392b;
}
.add-task {
  text-transform: uppercase;
  text-align: center;
  width: 33%;
  margin: auto;
  padding: 10px 25px;
  border: 2px solid #ecf0f1;
  transition: all 0.2s;
  color: #ecf0f1;
}
.add-task:hover {
  background-color: #e74c3c;
  border: 2px solid #e74c3c;
}
.button-group__default {
  cursor: pointer;
  position: absolute;
  right: 5%;
  top: 10%;
  font-size: 1.5em;
}

.transfer-button__default {
  display: inline-block;
  margin: 0 5px;
  transition: all 0.25s ease-in;
}

.transfer-button__default:hover {
  color: #e74c3c;
  transform: scale(1.5);
}

.column-footer__default {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  background-color: #34495e;
  display: flex;
  align-items: center;
  height: 75px;
}

.column-name {
  text-align: center;
}

Babel + JSX

class Column extends React.Component {
  constructor(props) {
    super(props);
    let { tasks } = props;
    this.state = { tasks };
  }

  onAddTask = () => {
    let task = prompt("Enter a task");
    this.props.onAddTask(task, this.props.index);
  };

  onRemoveTask = indexOfTask => {
    this.props.onRemoveTask({ indexOfColumn: this.props.index, indexOfTask });
  };

  onMoveTaskLeft = indexOfTask => {
    this.props.onMoveTaskLeft({ indexOfColumn: this.props.index, indexOfTask });
  };

  componentDidUpdate() {
    console.log(this.props);
  }
  render() {
    return (
      <div className="column-container__default">
        <h1 className="column-name">{this.props.columnName}</h1>
        {this.props.tasks.map((taskContent, index) => {
          return (
            <Task
              onRemoveTask={this.onRemoveTask}
              taskConent={taskContent}
              indexOfTask={index}
              onMoveTaskLeft={this.onMoveTaskLeft}
            />
          );
        })}
        <div className="column-footer__default">
          <div className="add-task" onClick={this.onAddTask}>
            Add Task
          </div>
        </div>
      </div>
    );
  }
}



class Board extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [["Column One Task One", "Column One Task Two"], ["Column Two Task One", "Column Two Task Two"], ["Column Three Task One", "Column Three Task Two"]],
      columnNames: ["To Do", "In Progress", "Done"]
    };
  }

  columnIsFirst = indexOfColumn => indexOfColumn - 1 < 0;
  columnIsLast = indexOfColumn =>
    indexOfColumn + 1 === this.state.columns.length;

  // TODO: make sure it's not the last element in the array
  onTransferTaskRight = ({ indexOfColumn, indexOfTask }) => {
    console.log(indexOfColumn, indexOfTask);
    const taskToBeTransfered = this.state.columns[indexOfColumn][indexOfTask];
    console.log(taskToBeTransfered);
    //filter out task from array
    const...