How do I unmount a div generated by a loop using id's in React.js?

Question

I want to be able to close the box(div) by using generated id's. I am confused as to what exactly should be inside .unmountComponentAtNode(HERE)

I've tried < div id={i} style={divStyle}> in the return statement of Box and assigning it in the loop, but neither have worked.

var React = require('react');
var ReactDOM = require('react-dom');

var Box = React.createClass({
  handleClick: function() {
    ReactDOM.unmountComponentAtNode(document.getElementById(i);
  },

  render: function() {
    var divStyle = {
      textAlign: "center",
      backgroundColor: "transparent",
      border: "solid",
      borderRadius: 2,
      color: "#999999",
      width: 250,
      height: 100,
      display: "inline-block",
      fontFamily: "sans-serif",
      margin: 10,
      padding: 40
    };

    var buttonStyle = {
      float: "right",
      marginTop: -30,
      marginRight: -30,
      cursor: "crosshair",
      color: "#F00",
      border: "1px solid #AEAEAE",
      borderRadius: 30,
      background: "#FFF",
      width: 20,
      height: 20,
      fontSize: 12,
      fontWeight: "bold",
      display: "inline-block"
    };

    return (
      <div style={divStyle}>
        <button onClick={this.handleClick} style={buttonStyle}>x</button>
      </div>
    );
  }
});

var ShowBox = React.createClass({
  render: function() {

    var boxes = [0,1,2,3,4,5,6,7,8];

    var renderData = [];

    for(var i = 0; i < boxes.length; i++) {
      var box = boxes[i];
      renderData.push(<Box id={i} key={i + box} />);
    }

    return (
      <div>
        {renderData}
      </div>
        );
      }
    });

module.exports = ShowBox;

Answer 1

Store the boxes array in state variable, and create the Box using map, pass a function from Parent component to child component to delete that component onClick of close button.

Issue with the way you are doing is, if you unmount that component by ReactDOM.unmountComponentAtNode(document.getElementById(i);, it will again get created because components are created by the array and you didn't change the array, that item still present in array, so it will not work, you need to store the array in state and delete the entry of that element from array in order to see the changes in UI.

One more thing, since you are using the common style for all the components so instead of storing that in variable inside render, store it globally and use it, it will avoid the same styling variable creation multiple times and make the code more readable and compact.

Write it like this:

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C", "#33FF00"];

var divStyle = {
      textAlign: "center",
      backgroundColor: "transparent",
      border: "solid",
      borderRadius: 2,
      color: "#999999",
      width: 25,
      height: 20,
      display: "inline-block",
      fontFamily: "sans-serif",
      margin: 10,
      padding: 40
    };

var buttonStyle = {
      float: "right",
      marginTop: -30,
      marginRight: -30,
      cursor: "crosshair",
      color: "#F00",
      border: "1px solid #AEAEAE",
      borderRadius: 30,
      background: "#FFF",
      width: 20,
      height: 20,
      fontSize: 12,
      fontWeight: "bold",
      display: "inline-block"
    };

var Box = React.createClass({
  handleClick: function() {   
       this.props.deleteElement(this.props.id);
  },

  render: function() {
    return (
      <div style={Object.assign({},divStyle,{backgroundColor:colors[this.props.name]})}>
        {this.props.name}
        <button onClick={this.handleClick} style={buttonStyle}>x</button>
      </div>
    );
  }
});

var ShowBox = React.createClass({
  getInitialState: function(){
     return {
         boxes : [0,1,2,3,4,5,6,7,8]
     }
  },
  deleteElement: function(i){
     let boxes = this.state.boxes.slice();
     boxes.splice(i, 1);
     this.setState({boxes});
  },
  renderData(){
     return this.state.boxes.map((box,i)=>{
        return <Box id={i} name={box} key={i} deleteElement={this.deleteElement}/>
     })
  },
  render: function() {
    return (
           <div>
              {this.renderData()}
           </div>
    );
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>