JSFiddle - React, Tailwind, and code Playground

by Juan Marco

HTML

<div id="app"></div>

CSS

body {
  padding: 20px;
}

td {
  border: 1px solid black;
  height: 15px;
  padding: 5px;
}

tr {
  border: 1px solid black;
  position: relative;

}

table {
  margin-top: 10px;
  text-align: center;
  width: 70px;
  border: 1px solid black;
  background-color: beige;
  border-collapse: collapse;
}

.trRed {

  color: black;
}

.trBlack {

  color: red;
}

.div {
  float: right;
  width: 6px;
  height: 6px;
  background-color: red;
  cursor: pointer;
}

React

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textColor: true,
      list: []
    };
    this.handleClick = this.handleClick.bind(this);
    this.addElement = this.addElement.bind(this);
    this.removeElement = this.removeElement.bind(this);
  }
  handleClick(e) {
		e.target.classList.toggle("trRed")
    e.target.classList.toggle("trBlack")
  }
  addElement() {
    this.setState({ list: this.state.list.concat("element") });
  }
  
  removeElement(e, index) {
    e.stopPropagation();
    this.setState({ list: this.state.list.filter((_, i) => index !== i) });
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.addElement} type="button">
          Add
        </button>
        <table>
          {this.state.list.map((element, index) => {
            return (
              <tr>
                <td
                  onClick={this.handleClick}
                >
                  {element}
                  <div
                    onClick={e => this.removeElement(e, index)}
                    className="div"
                  />
                </td>
              </tr>
            );
          })}
        </table>
      </div>
    );
  }
}


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