How to use a dynamically created component into a JSX snippet in React

Question

I have the following component (Section) that render a list of Field components:

class Section extends React.Component  {

    renderFields() {
        const subfields = this.props.data_fields || [];
        const fieldsList = subfields.map((field_data) =>
            this.addField(field_data)
        );

        return (
            fieldsList
        )
    }

    addField(field_data) {
        return (
            <Field name='foo' type='bar' />
        )   
    }

    render() {
        return <div>
            {this.renderFields()}
        </div>;
    }

}

I would like to replace the addField method, using a dynamically created Component like this:

    addField(field_data) {
    ....

        let field = new Field({name: name, type: type})  // Component, not ReactElement
    ....
    // Some logic using 'field' here....

        return (
            {field}
        )
    }

But I get this error:

Error: Objects are not valid as a React child (found: object with keys {field}).

So I tried to modified the return into:

        return (
            <div>
                {field.render()}
            </div>
        )

This output correctly on the page, but when I explore the DOM with React Developer Tool, the element became a (previously it was a )

I think I do it wrong because when later-on I change the state of one of these dynamically added Field, I get the following error:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Field component.

How can I use a dynamically created component into a JSX snippet ?

what are you trying to achieve with creating components yourself? — pwolaq, Jun 28 '17 at 16:00
I need to store the reference of this dynamically created component into a list owned by a top-level component. (for information, it is a leaf of a multi-level tree) — matt, Jun 28 '17 at 16:30
Try using a capital letter, as in `let FieldInstance = new Field({...})`, then just return the `FieldInstance` component as itself . https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters, otherwise JSX won't parse it as a component — lux, Jun 28 '17 at 16:34
Thanks @lux for your answer. When I do: `return ( FieldInstance )` I get the following error: `Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater, state}). If you meant to render a collection of children, use an array instead or wrap....` — matt, Jun 28 '17 at 16:43
Looks like `Field` is an object, and not a component. More code would be helpful — lux, Jun 28 '17 at 17:47
@pwolaq: I can't use refs since I populate dynamically a tree, and I need to store somewhere in my root component a flat-list of references on all the leaves of this tree — matt, Jun 29 '17 at 09:24

How to use a dynamically created component into a JSX snippet in React

0 Answers0