I'm trying to create a html element on a parent ponent on react and access that ponent div inside a child ponent, then I can append new elements in the div from the child ponent.

After many attempts I wasn't able to fix props.canvasDivElement.current = null on the child constructor.

I've tried to do this using REF and without refs... No luck so far.

Any ideas?

The parent ponent looks like:

import React from "react";
import ReactViewer from "../ReactViewer/ReactViewer";

export default class CanvasWrapper extends React.Component {
    private _divElement: React.RefObject<HTMLDivElement>;

    constructor(props: any) {
        super(props);
        this._divElement = React.createRef<HTMLDivElement>();
    }

    render() {
        return (
            <div>
                <ReactViewer canvasDivElement={this._divElement}></ReactViewer>
            </div>
        );
    }
}

The child ponent:

import React from "react";

type ReactViewerState = {
};

type ReactViewerProps = {
    canvasDivElement: React.RefObject<HTMLDivElement>;

};

    export default class ReactViewer extends React.Component<ReactViewerProps, ReactViewerState> {
        constructor(props: ReactViewerProps, state: ReactViewerState) {
            super(props, state);
            const newElement = document.createElement('span');
            newElement.innerText = 'element';
            props.canvasDivElement.current!.appendChild(newElement); //current is null
        }

        render() {
            return (
                <div ref={this.props.canvasDivElement} />
            );
        }
    }

I'm trying to create a html element on a parent ponent on react and access that ponent div inside a child ponent, then I can append new elements in the div from the child ponent.

After many attempts I wasn't able to fix props.canvasDivElement.current = null on the child constructor.

I've tried to do this using REF and without refs... No luck so far.

Any ideas?

The parent ponent looks like:

import React from "react";
import ReactViewer from "../ReactViewer/ReactViewer";

export default class CanvasWrapper extends React.Component {
    private _divElement: React.RefObject<HTMLDivElement>;

    constructor(props: any) {
        super(props);
        this._divElement = React.createRef<HTMLDivElement>();
    }

    render() {
        return (
            <div>
                <ReactViewer canvasDivElement={this._divElement}></ReactViewer>
            </div>
        );
    }
}

The child ponent:

import React from "react";

type ReactViewerState = {
};

type ReactViewerProps = {
    canvasDivElement: React.RefObject<HTMLDivElement>;

};

    export default class ReactViewer extends React.Component<ReactViewerProps, ReactViewerState> {
        constructor(props: ReactViewerProps, state: ReactViewerState) {
            super(props, state);
            const newElement = document.createElement('span');
            newElement.innerText = 'element';
            props.canvasDivElement.current!.appendChild(newElement); //current is null
        }

        render() {
            return (
                <div ref={this.props.canvasDivElement} />
            );
        }
    }

• javascript
• reactjs
• typescript

• "I'm trying to create a div element on a parent ponent on react and acess that ponent div inside a child ponent, then I can append new elements in the div from the child ponent." This sounds like you are trying to solve a problem in React by circumventing the basic principles of React. You might as well just do this in vanilla JS instead. In React, the parent should be responsible for rendering its own children. – Code-Apprentice Commented Sep 20, 2019 at 14:53

2 Answers 2

Rookie mistake, the element will always be null until it renders. I've changed the line bellow to the ponentDidMount event:

    props.canvasDivElement.current!.appendChild(newElement);

It looks like you are trying to circumvent the basic principles of React to solve a problem that React provides other tools for. The React way of municating between a child and a parent is to pass a callback function to the child. Then the child calls the callback to signal to the parent to update its children.