CODEWITHSUNDEEP
reactjs
FrenchyRomain
FrenchyRomain

Reputation: 13

Container is not a DOM element in React?

tried following this tutorial : http://www.mattmorgante.com/technology/dropdown-with-react I'm trying not to print planets, but project names in an html ul li format. Here are my 2 pages per the tutorial : Project List (which is supposed to print said projects)

import React from 'react';
import '../styles/list.css';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import "./ProjectSearch";

class ProjectList extends Component {
    constructor (props) {
        super (props);
        this.state = {
            projects: [],
        };
    }

    componentDidMount()
    {
        let initialProjects = [];
        fetch('http://192.168.1.33:8080/getprojects/')
        .then(response => {
            return response.json();
        }).then(data => {
            initialProjects = data.results.map((project) => {
                return (project)
            });
            console.log(initialProjects);
            this.setState({
                projects: initialProjects,
            });
        });
    }
   render () {
    let projects = this.props.state.projects;
    let liItems = projects.map((project) =>
            <li key={project.name}>{project.name}</li>
        );
        return (
        <div className="project">
            <div className="validations">
                <div className="validationfilter">
                    <a href="#">Validé </a>
                </div>
                <div className="validationfilter2">
                    <a href="#">En Attente de Validation</a>
                </div>
            </div>
            <div className="create">
            <a href="#">Créer un Projet</a>
            </div>

            <div className="list" id="react-search">
                <ul>
                    {liItems}
                </ul>
            </div>
        </div>

        );
    };
}
export default ProjectList;
ReactDOM.render(<ProjectSearch />, document.getElementById('react-search'));

And the 2nd page called Project Search

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Route, withRouter} from 'react-router-dom';

class ProjectSearch extends Component {
    constructor() {
        super();
        this.state = {
            projects: [],
        };
    }

    componentDidMount() {
        let initialProjects = [];
        fetch('http://192.168.1.33:8080/getprojects/')
            .then(response => {
                return response.json();
            }).then(data => {
            initialProjects = data.results.map((projects) => {
                return projects
            });
            console.log(initialProjects);
            this.setState({
                projects: initialProjects,
            });
        });
    }

    render() {
        return (
            <Projects state={this.state}/>
        );
    }

}

export default ProjectSearch;

ReactDOM.render(<ProjectSearch />, document.getElementById('react-search'));

So I get Target container is not a DOM element in React and i don't understand what the problem is... Need this to work for a project due in 1 week and a half

Upvotes: 0

Views: 56

Answers (1)

Sulthan
Sulthan

Reputation: 130132

The real problem is that you are trying to render your React component tree into the React component itself:

document.getElementById('react-search')

The element with identifier react-search is a React component. That cannot work.

Your HTML needs to contain a non-react element, e.g.:

<html>
  <body>
    <div id="react-root"></div>
  </body>
</html>

and you have to render your React component into that DOM element:

ReactDOM.render(<ProjectSearch />, document.getElementById('react-root'));

Upvotes: 1

Related Questions