Add and Remove HTML Elements on Button Click in React

Question

What's the best uncomplicated way to achieve this jQuery fiddle using just React without using jQuery or any other libraries? I don't quite have the ReactJS skills yet, and was wondering if there was a way to create and delete elements dynamically.

I was thinking of creating a

this.state = { "inputs": ["<input type="text" /><input type="checkbox" />"] }

state variable array that holds the HTML when added, giving each one a unique key based on the index and then .map() it, but am unsure whether there's an easier way to achieve this and am unsure on how to delete each element as such.

Would love any help or feedback, thanks!

Yichz · Accepted Answer · 2019-07-10T15:11:50.237

Here is a "React" way to do this, I'm not a React expert, so the code could be better, would accept corrections.

Yes, react has more boilerplate codes, because you don't handle DOM directly and there is less "magic" which means you have more control overall. (specially as a controlled component)
States should be as minimum as possible, you just have to hold the pure data, other decorative stuff let components to handle them.
depends on the situation, you may want to separate the Row component into 2 separate components with more props.
??? more suggestions?

UPDATE: after workin with React everyday for the last past 3 years, I found there are some bad practices on the previous code, I have update the code to be cleaner hopefully it helps you.

const Row = function(props){
  const {checked, value, onChange, onChecked} = props;
  return (
    <div>
      <input 
        type="checkbox" 
        checked={checked}
        onChange={onChecked}
        />
      <input type ="text" value={value}  onChange={onChange}/>
    </div>
  );
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      rows: [
        {value: 'row1', checked: false},
        {value: 'row2', checked: true},
        {value: 'row3', checked: false},
      ]
    };
  }
  
  updateValue = (e, idx) => {
    const rows = [...this.state.rows];  // copy array because we don't want to mutate the previous one
    rows[idx].value = e.target.value;
    this.setState({
        rows,
    });
  }
  
  onChecked = (idx) => {
    const rows = [...this.state.rows];  // copy array because we don't want to mutate the previous one
    rows[idx].checked = !rows[idx].checked;
    this.setState({
        rows,
    });
  } 
  
  addRow = () => {
    const rows = [...this.state.rows, 
                  {value:'', checked: false}
                 ];
    this.setState({
        rows,
    });
  }
  
  deleteRows = () => {
    this.setState({
      rows: this.state.rows.filter(e => !e.checked)
    });
  }
 
  render(){
    return(
      <div>
        {this.state.rows.map((row, idx) => {
          return(
              <Row 
                key={idx} 
                value={row.value}
                checked={row.checked}
                onChange={(e) => this.updateValue(e, idx)} 
                onChecked={() => this.onChecked(idx)}
                /> 
            )
        })
        }
        <button onClick={this.addRow}>
          add 
        </button>
        <button onClick={this.deleteRows}>
          delete
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>

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

hi, sorry, quick question, when removing an element, before removing it, should I remove all the events that is attached to that element?? so for example, I want to remove row number 2, should I remove "onChange" and "onChecked" events that is attached to row number 2 element first then remove the element?? thanks — JustANewCoder, Jan 10 '21 at 16:41
you don't need to do that, because those are not added by `addEventListener` browser will free those if the dom is not longer there. also see this might help https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — Yichz, Jan 11 '21 at 16:30

score 1 · Answer 2 · answered May 07 '20 at 18:46

1

Just use the old plain JS way

 var elem = document.getElementById("button_" + id);
 elem.parentNode.removeChild(elem);

answered May 07 '20 at 18:46

Martin Tonev

747
12
21

3

I've read getElementbyId is not recommended for React – Tobi Aug 21 '20 at 14:55
Why not ReactJS is JS like all the other fancy libraries for JS, can you tell me why it is not good? – Martin Tonev Aug 22 '20 at 15:48
tell me if I understood this correctly: https://stackoverflow.com/a/58352254/10695692 – Tobi Aug 22 '20 at 15:59
OK I use it like this without any problems! – Martin Tonev Aug 24 '20 at 08:50
You shouldn't remove/add elements from the DOM manually in React, by doing so you wouldn't use Reacts Virtual DOM and you wouldn't use Reacts advantages also it will most likely cause problems – Oner T. May 23 '22 at 14:28
I have used it in many big projects and there were no problems. Also if this is not the way propose a better one! – Martin Tonev May 25 '22 at 15:36

Naveen Kumar Souriraj Anthuvan · Answer 3 · 2021-03-25T11:47:55.063

0

In my opinion, keep the element you want to create in a variable . every time you want to create a element push() it into a array and then map it through the array to render it, if you want to remove you can use pop() to remove the last item in the array.

Note: you have to use dangerouslySetInnerHTML to render the element when it is a string.

Happy Coding !

edited Mar 25 '21 at 11:47

answered Mar 25 '21 at 11:31

Naveen Kumar Souriraj Anthuvan

1
1

Add and Remove HTML Elements on Button Click in React

3 Answers3