Добавить новый компонент динамически

Question

Я в родительском компоненте и пытаюсь динамически добавить новый компонент, нажав кнопку. Я вставлю только необходимый код, потому что мои файлы большие.

Итак, ниже, скажем, родительский компонент:

    export default class Parent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            conditions: [{attribute: '', operator: '', value: ''}]
        }
    }

    addCondition = (e) => {
        this.setState((prevState) => ({
            conditions: [...prevState.conditions, { attribute: '', operator: '',value: '' }],
        }));
    }

    render() {
        let {conditions} = this.state
        return(
                <Row>
                    <TextButton label='Add Child' onClick={(e) => {this.addCondition}} flat={true} />
                </Row>
                <Row>
                    <ChildElement conditions={conditions} />
                </Row>
            )
    }

}

И это ChildElement, который я хочу визуализировать динамически:

export class ChildElement extends Component {
    constructor(props) {
        super(props);

        this.state = {
            attribute: '',
            operator: '',
            action: '',
        };
    }

    render() {
        return (
            this.props.conditions.map((val, idx)=> {
                let attributeId = `attributeId-${idx}`,
                    operatorId = `operatorId-${idx}`,
                    valueId = `valueId-${idx}`
                return (
                    <Row>
                        <Col >
                            <Dropdown id={attributeId}  />
                        </Col>
                        <Col >
                            <Dropdown id={operatorId}  />
                        </Col>
                        <Col>
                            <Dropdown id={valueId} />
                        </Col>
                    </Row>
                );
            })
        );
    }
}

Когда родительский компонент загружен, я получаю ошибку:

Uncaught Error: ConditionElement.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Answer 1

Вы должны заключить значение в ваш render метод вашего дочернего компонента как минимум в div. Теперь вы возвращаете массив компонентов.

Я не знаю, какую версию React вы используете, но вы могли бы сделать:

return (
  <>
    { conditions.map( /* ... */ ) }
  </>
);

или

return (
  <div>
    { conditions.map( /* ... */ ) }
  </div>
);

, если <> и </> не поддерживаются в вашей версии.

Answer 2

1 - вам нужно вызвать функцию в вашем onClick - onClick={(e) => {this.addCondition}} должно быть либо onClick={(e) => {this.addCondition()}}, либо onClick={this.addCondition}

2 - Вам нужно обернуть смежные компоненты React в одного родителя (обычно <div> или <React.Fragment>).

Answer 3

Здесь я получу дикое предположение, поскольку я не вижу весь код.
Вы импортируете ChildElement, как если бы это был default export, но на самом деле это именованный экспорт.

Этот

export class ChildElement

должен быть импортирован так:

import {ChildElement} from './path'

А не:

import ChildElement from './path'