CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Paul
Paul

Reputation: 283

Objects are not valid as a React child (found: [object HTMLDivElement])

I want to pass a value to a div with id good in my index.html but it brings this error, Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead. in TestComponent (at App.js:49) in div (at App.js:28) in Apps (at index.js:7) Please what am I doing wrong

TestComponent.js

import React, { Component } from 'react';

class TestComponent extends Component {
componentDidMount(){
    console.log("Great");
}

render() {
   // var {test} = this.props;
    return (
        <p>
            {this.props.test}
        </p>,
            document.getElementById("good")
    );
}
}

export default TestComponent;

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
 import TestComponent from "./components/TestComponent"

class Apps extends Component {
constructor(props){
    super(props);
}
render() {
    return (
        <div>

            <TestComponent test='doyin'/>

        </div>
    );
 }
 }

 export default Apps;

Index.html

<div id="good"></div>

Upvotes: 2

Views: 2154

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282120

A class Component render function shouldn't use document.getElementById, you need to use ReactDOM.render to do that

import React, { Component } from 'react';

class TestComponent extends Component {

    componentDidMount(){
        console.log("Great");
    }

    render() {
       // var {test} = this.props;
        return (
            <p>
                {this.props.test}
            </p>
        );
    }

}


export default TestComponent;

App

class Apps extends Component {

    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>

                <TestComponent test='doyin'/>

            </div>
        );
     }

 }
 ReactDOM.render(<Apps />, document.getElementById("good"))
 export default Apps;

Upvotes: 1

Rafal Wiliński
Rafal Wiliński

Reputation: 2390

In TestComponent.js, inside render function you are trying to return two elements, <p> and document.getElementById("good"). Probably you just wanted to return <p>:

render() {
  return <p>{this.props.test}</p>;
}

Also, it looks like you've mistaken React.Component.render with ReactDOM.render(element, container[, callback]) where the second argument of the functions is the container.

Upvotes: 1

Related Questions