React - invariant violation on modal

Question

I have a modal which has a dropdown with Categories. When I select a Category, a dropdown with Classifications is rendered. If I select a Classification, another component is rendered.

It works well the first time I select a Category and a Classification. However, if I want to select a Category again, I get the following error:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.1.0.0.1.0.2.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

I looked this up, but usually this appears when a <table> component is used. I am not using <table> .

The code of the modal is beneath:

  getInitialState: function() {
        return {categorySelected: false};
    },

    handleSelectCat: function(event)   {
        var index = event.target.value;
        this.setState({categorySelected: true});
        this.setState({classificationSelected: false});

        var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
            return <option value={index}><a href="#">{elem.description}</a></option>
        });

        this.setState({classificationDesc: classificationDesc});
    },

    handleSelectClass: function(event) {
        var index = event.target.value;
        this.setState({classificationSelected: true});
    },

    closeModal: function()  {
        this.setState({categorySelected: false});
        this.setState({classificationSelected: false});
    },

    render: function() {

        var categoryDesc = this.props.categories.map(function (elem, index) {
            return <option value={index}>{elem.description}</option>
        });

        return (

        <div id="newListModal" className="modal fade" role="dialog">
            <div className="modal-dialog">

                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                        <h4 className="modal-title">Create new list</h4>
                    </div>

                    <div className="modal-body">
                        <div>
                            <p>Select category</p>
                            <select class="form-control" onChange={this.handleSelectCat}>
                                {categoryDesc}
                            </select>
                            {this.state.categorySelected == true
                                ?
                                <div>
                                    <p>Select classification</p>
                                    <select class="form-control" onChange={this.handleSelectClass}>
                                        {this.state.classificationDesc}
                                    </select>
                                </div>
                                :
                                <div></div>}
                            {this.state.classificationSelected == true
                             ?
                                <ListAddition classification={this.props.data}/>
                             :
                                <div></div>
                            }
                        </div>
                    </div>

                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.closeModal}>Close</button>
                    </div>
                </div>

            </div>
        </div>
        )
    }

Answer 1

  var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
        return <option value={index}><a href="#">{elem.description}</a></option>
    });

You have an <a> tag inside <option> . This is not standard, and browser will probably remove it which conflicts with React vDOM