how to add or remove tables dynamically in ReactJS

Question

i want to add a table row by clicking Add, and remove a table row by clicking the small red div inside the table, while retaining the color change option when table is clicked on.

I've been trying for hours, but i'm still new to ReactJS, maybe someone could give me a hint, how to do this, for example with help of an array, a boolean or a for loop? I can't get the right way yet, would be thankful for your input.

i've been thinking about this kind of logic, but haven't been able to implement it yet..

{Boolean(this.state.rows.length) && (
                <div onClick={this.handleRemoveRow}></div>
              )}

https://jsfiddle.net/mattighof/0uop13kd/

Guru Hadadi · Accepted Answer · 2020-05-04 05:21:56Z

1

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>
    );
  }
}

edited May 4, 2020 at 5:21

answered May 4, 2020 at 4:53

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ekud093 Over a year ago

only, i noticed - when multiple TR's are created, clicking on one of them, changes color for all of them. Could this be cured with stopPropagation?

Guru Hadadi Over a year ago

yes .. because.. you are maintaining a single colour for the whole table... so you need can modify the list array to array of object and maintain a colour and implement it ..

ekud093 Over a year ago

can you please help with this color change issue? i haven't been able to achieve the result even after a lot of trying.

Prabhakar Matkar · Accepted Answer · 2020-05-04 06:09:36Z

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"));

Collectives™ on Stack Overflow

how to add or remove tables dynamically in ReactJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related