score:1

Accepted answer

do the following:

  • maintain a state say list and store all your items
  • create onclick handlers for adding and removing items in the table
  • update the state when you add/remove
  • iterate and render this.state.list
  • make sure to do event.stoppropagation() in the remove handler. this way your colour change functionality still works.

see here the implementation of adding and removing item

code snippet:

class table extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      tablecolor: true,
      list: []
    };
    this.handleclick = this.handleclick.bind(this);
  }
  handleclick() {
    this.setstate({
      tablecolor: !this.state.tablecolor
    });
  }
  additem() {
    this.setstate({ list: this.state.list.concat("item") });
  }
  removeitem(e, index) {
    e.stoppropagation();
    this.setstate({ list: this.state.list.filter((_, i) => index !== i) });
  }

  render() {
    return (
      <div classname="container">
        <button onclick={this.additem} type="button">
          add
        </button>
        <table>
          {this.state.list.map((item, index) => {
            return (
              <tr>
                <td
                  classname={this.state.tablecolor ? "trred" : "trblack"}
                  onclick={this.handleclick}
                >
                  {item}
                  <div
                    onclick={e => this.removeitem(e, index)}
                    classname="innerdiv"
                  />
                </td>
              </tr>
            );
          })}
        </table>
      </div>
    );
  }
}

score:0

this is one of the ways you can do it:

    class table extends react.component {
  constructor(props){
    super(props)
    this.state ={
    rows:[{id:8,name:'item8',tableccolor:'trblack'}],
      tablecolor: true
    }
    this.handleclick = this.handleclick.bind(this);
    this.handleadd = this.handleadd.bind(this);
    this.renderrows = this.renderrows.bind(this);
  }
  handleclick(clickedrow){
  const {rows} = this.state;
  let newrows = rows.map(row => {
  if(row.id === clickedrow.id) {
  row.tablecolor = 'trred'
  return row
  }
  return row;})
  this.setstate({rows:newrows})
  }

  handleadd() {
  const {rows} = this.state;
  const count = rows.length;
  rows.push({id:count,name:count,tableccolor:'trblack'})
  this.setstate({rows:rows})
  }

  renderrows() {
  return this.state.rows.map(row => {
  return (<tr>
            <td classname={row.tablecolor}>
              <div>{row.name} 
                <div onclick={() => this.handleclick(row)} 
                     classname="innerdiv">
                </div>
              </div>
            </td>
           </tr>)

  });
  }
  render(){
    return (
    <div classname="container">
    <button type="button">add</button>
    <table>
    {this.renderrows()}
    </table>
    </div>
    )
  }

}

reactdom.render(<table />, document.queryselector("#app"));

Related Query

More Query from same tag