0

I am trying to populate a select with data from an API call. The select is rendered and then when the data comes back, I want it to populate the options of the select. I am setting the state of tagList when the data comes back and passing this.state.tagList as a prop to the component. But when I update state, it's not updating the component. Also getting the following error :

Uncaught Invariant Violation: findComponentRoot(..., .3.2.0.0.0.1): 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 ``.

** Note : Not my code. Trying to help a co-worker with a project **

select component :

'use strict'

import React from 'react';
import classNames from 'classnames';
//import ReactDOM from 'react-dom';

var TagBar = React.createClass({

    propTypes: {
        tagList: React.PropTypes.array.isRequired
    },

    render: function() {

        return(
                <select ref="tagBar" className="searchbar ui multiple fluid search dropdown" multiple>                               
                    {
                        this.props.tagList.map(function(tag){
                            return <option key={tag._id} value={tag.tag}>{tag.tag}</option>;
                        })
                    }               
                </select>
        )
    } 
});

export default TagBar;

Main component :

'use strict'

import React from 'react';
import ReactDOM from 'react-dom';

import TagBar from '../../components/tagbar';

import InterviewAPI from '../api.js';

var AddEditQuestion = React.createClass({

    propTypes: {
        action: React.PropTypes.string.isRequired
    },

    getInitialState: function() {

        var details = {};

        switch (this.props.action) {             

            case 'add':
            //init an empty props object
            details = {
                text: '',
                tech: '',
                tags: {},
                level: 0,
                answer: ''            
            }            
            break;

            case 'edit':
            //the details are passed in as props
            details = this.props.details 
            break;

        }


        //add is the default action 
        return {
            action: this.props.action,
            details: details,
            tagList: []
        }  
    },

    render: function() {

        return(
            <div ref="addQuestionModal" className="ui modal addQuestionModal">
                <i className="close icon"></i>
                <div className="header">
                   {this.state.action} Question
                </div>
                <div className="content">
                    <div className="description">
                        <div className="ui form">
                                <div className="field">
                                    <label htmlFor="questionText">Question</label>
                                    <textarea id="questionText" value={this.state.details.text}></textarea>
                                </div>                           

                                <div className="field">
                                    <label htmlFor="questionAnswer">Answer</label>
                                    <textarea id="questionAnswer" value={this.state.details.answer}></textarea>
                                </div>    
                                <div className="field">
                                    <label htmlFor="questionTags">Tags</label>
                                    <TagBar tagType='question' action={this.state.action} tagList={this.state.tagList} />                                                                                            
                                </div>
                                <div className="ui two column grid">
                                    <div className="row">
                                        <div className="column">
                                            <div className="field">
                                                <label htmlFor="questionTech">Technology</label>
                                                <select ref="questionTech" id="questionTech" name="questionTech">
                                                    <option value="">select...</option>
                                                    <option value="js">Javascript</option>
                                                    <option value="net">.NET</option>
                                                    <option value="mobile">Mobile</option>                                                                                                    
                                                </select>
                                            </div>
                                        </div>
                                        <div className="column">
                                            <div className="field column">
                                                    <label htmlFor="questionLevel">Level</label>
                                                    <select ref="questionLevel" id="questionLevel" name="questionLevel">
                                                        <option value="">select...</option>
                                                        <option value="junior">Junior</option>
                                                        <option value="senior">Senior</option>
                                                    </select>
                                            </div>                                        
                                        </div>                                        
                                    </div>
                                </div>                                                                                                                                                 
                        </div>                   
                    </div>
                </div>
                <div className="actions">
                    <div className="ui middle aligned two column grid">
                        <div className="row">                            
                            <div ref="deleteAction" className="left aligned column">
                                {/* based on the state of the modal, this will show different buttons */}                      
                            </div>
                            <div ref="actionButtons" className="right aligned column actionButtons">
                                {/* based on the state of the modal, this will show different buttons */}

                            </div>
                        </div>
                    </div>
                </div>
            </div>             
        )               
    },

    componentWillMount: function() {
        this.getTags();
    },

    componentDidMount: function() {
        //initialize select dropdowns
        $(this.refs.tagBar).dropdown();
        $(this.refs.questionTech).dropdown();
        $(this.refs.questionLevel).dropdown();

        //display the action buttons (based on whether you're adding or editing)
        this.displayActionButtons();

        //once the modal is rendered, go ahead and open it        
        $(this.refs.addQuestionModal).modal('show');
    },

    getTags: function() {
        var apiPath = InterviewAPI.routes.basePath + InterviewAPI.routes.realm.questionTags;

        //make the api call, passing result to callback   
        $.get(apiPath, this.gotTags);        
    },
    gotTags: function(result) {
        var options = [];

        if (result.length > 0) {
            //if you got tags back, add them to the dropdown
            this.setState({
                tagList: result
            });                                    
        }
    },

    handleAddQuestion: function() {
       console.log('add question'); 
    },

    closeModal: function() {
        $(this.refs.addQuestionModal).modal('hide');
    },       
});

export default AddEditQuestion;

The Uncaught Invariant Violation is being thrown when the setState is being called inside gotTags in the main component.

2 Answers 2

0

It looks like a couple jQuery plugins are editing the DOM directly, which throws-off react. It looks like you're using jQuery UI, which is pretty liberal with editing the DOM...if possible, use plugins designed for ReactJs.

For starters, try replacing the following:

jQuery dropdown with: https://github.com/JedWatson/react-select

jQuery modal with: https://github.com/reactjs/react-modal

In addition, take a look at react-bootstrap: http://react-bootstrap.github.io/

6
  • Hmm, that's supposed to have React integration out-of-the-box. Maybe you can try to replicate this with a jsfiddle? On the error message, is there any stack info that may lead you to a particular file or line number? Apr 8, 2016 at 16:54
  • No stack trace... but the component root it gives is the one linked to the select Apr 8, 2016 at 17:04
  • I updated the question to show where the stacktrace is coming from now. It decided to give me a little more help today Apr 11, 2016 at 15:18
  • Hmm that's definitely an odd error. You might have to do something like this: self = this; $.get(url, function(result) { return self.gotTags(result) }); Apr 11, 2016 at 15:35
  • Definitely a weird issue....still being thrown on this.setState({ tagLIst: result }); Apr 11, 2016 at 16:34
0

When using modals in semantic ui, when you show the modal, it moves it in the DOM to "show" it. Therefore the virtual DOM React knows about is different than the real DOM. This is what causes the error to be thrown. To keep the modal from moving in the DOM you need to set the detachable property to false like :

 $('.addQuestionModal').modal({detachable:false}).modal('show');

Then the modal is in the same spot in both the virtual and actual DOM and React can continue to interact with it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.