Реагировать: не могу получить список компонентов

В моем классе реакции я пытаюсь добавить компонент Row в список на потом, когда мне нужно будет что-то перечислить. Он возвращает мне эту ошибку:
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

В другом проекте у меня такая же функция, но она работает по-другому.

Я использую WebPack и reactstrap для Row.

Мои занятия

import React, { Component } from 'react';
import {Row, Col, Container} from 'reactstrap';

class Test extends Component {

  constructor(props) {
    super(props);

    this.insert = this.insert.bind(this);
  }

  insert() {
    var list = [];
    list.push(
            <Row>
              <Col>
                <p>Test data</p>
              </Col>
            </Row>);

    return {list};
  }

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

export default Test;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать это

import React, { Component } from "react";
import { Row, Col, Container } from "reactstrap";

class MyComponent extends Component {
  insert() {
    var list = [];
    list.push(
      <Row>
        <Col>
          <p>Test data</p>
        </Col>
      </Row>
    );

    return list;
  }

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

export default MyComponent;

https://codesandbox.io/embed/j2pm2q1499

Другие вопросы по теме