Question

179

React AppendChild Component doesn't work

rated 0 times [ 183] [ 4] / answers: 1 / hits: 17131 / 8 Years ago, thu, may 5, 2016, 12:00:00

I've been looking everywhere and cannot find a solution to this.

I'm simply trying to do the following:

import ComponentOne from '../components/component-one'

import ComponentTwo from '../components/component-two'



class Home extends Component {

    constructor( props ) {

        // So I can dynamically call a Component, found no other way

        this.components = {

            ComponentOne: <ComponentOne />,

            ComponentTwo: <ComponentTwo />

        }

    }



    [...code removed for brevity...]



    _appendStep( step ) {

        var component = React.cloneElement(this.components[step])

        this.steps.appendChild( component )

    }

}

This seems pretty simple to me. I have

<div className=recipe-steps ref={(ref) => this.steps = ref}></div>

that I need to dynamically appendChild components too. The thing is, the steps I append to this <div> absolutely need to be one of the components I've created, needs to allow me to add multiple component children, and even duplicate (that's why I'm using React.cloneElement()) Components.

Once I have all the steps appended, a later process will then parse each and every step to determine how to run a recipe.

The following works just fine, but I'm not needing to create a simple DOM node, I need to use a Component I already have built and append that

var basicElement = document.createElement('h1')

basicElement.innerHTML = This works, but I need a component to work too

this.steps.appendChild( basicElement )

I get the following error when I try to this.steps.appendChild( component ):

Error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I guess my main question is this: how can I convert my React Component into a node that can be used with this.steps.appendChild()?

OR: is there a React way to dynamically append children components to my this.steps?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamie

Add To Favorites

Follow

Total Points: 257

Total Questions: 102

Total Answers: 95

Location: Bonaire

Member since Wed, Mar 29, 2023

1 Year ago

answered 8 Years ago sonja · Accepted Answer

this.steps should be an array, then, you will be able to render that array using the map function.

Also you should store your array in your state in order to auto re-render the component after you add new steps.

It should look like this

 constructor( props ) {

    this.state = {

       steps: []

     }

    this.components = {

        ComponentOne: <ComponentOne />,

        ComponentTwo: <ComponentTwo />

    }

}

_appendStep( step ) {

        let componentToAdd= this.components[step];

        this.setState({steps: this.state.steps.concat([componentToAdd])})

    }



render(){

     ....

    {this.state.steps.map(function(comp,i){

        return <div key={'Step' + i}>{comp}</div>

    })}



}