CODEWITHSUNDEEP
reactjs
Nikola Lukic
Nikola Lukic

Reputation: 4238

Invariant Violation: Objects are not valid as a React child (found: [object HTMLCanvasElement])

Full error log :

Invariant Violation: Objects are not valid as a React child (found: [object HTMLCanvasElement]). If you meant to render a collection of children, use an array instead. in CanvasEngine

The above error occurred in the component: in CanvasEngine

There is no return from render . Something wrong with elementCanvas: HTMLCanvasElement ?!

I want to have html element from code , i try to store it in this.state but still not working...

import * as React from "react";

export class CanvasEngine extends React.Component<{name:string}, {}, void > {

    private elementCanvas: HTMLCanvasElement;
    private programName: string = " test ";
    private width: number = 100;
    private height: number = 100;

    private test: number = 1;

    constructor(props: {name:string}) {
        super(props);

        this.state = {  elementCanvas : document.createElement('canvas') };
        //super( {name} );
        this.elementCanvas = document.createElement('canvas');
        this.elementCanvas.width = 200;
        this.elementCanvas.height = 200;
        //document.body.appendChild(this.elementCanvas);
        console.log("constructor");
        this.tick();
       
    }

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

    tick() {

        let context = this.elementCanvas.getContext("2d");
        context.fillStyle = "lime";
        context.clearRect(0, 0, this.width, this.height);

        context.save();
        context.translate(100, 100);

        this.test += 0.01;
        context.rotate(this.test);
        context.fillStyle = "#F00";
        context.fillRect(50, 50, 100, 100);
        context.restore();

        setTimeout( () => { this.tick() } , 30 );
      }

    public render() {
        return <> {this.elementCanvas} </>;
    }
}
//
import * as React from "react";
import * as ReactDOM from "react-dom";

import { ProjectName } from "./components/project-name";
import { CanvasEngine } from "./components/canvas";

ReactDOM.render(
    <>
    <h1>Page title</h1>,
    <CanvasEngine name="nidza" />,
    <ProjectName compiler="TypeScript" framework="React" />
    </>,
    document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>

Upvotes: 2

Views: 919

Answers (1)

Gobinda
Gobinda

Reputation: 79

Instead of using document.createElement(), can you please try with React.createElement().

Upvotes: 2

Related Questions