Рендеринг компонента по клику

Question

Возможно дублирование.Я пробовал решения из нескольких других постов, но мое решение все еще не работает.Я пытаюсь сделать компонент из onClick.Функция getModal () вызывается и отображает console.logs, но компонент не обрабатывается.Любое решение или совет будут оценены.

Все коды являются фрагментами

Это мой TestGroup.tsx

export class ListGroup extends React.Component<IProps> {
  getModal = () => {
    return (
      console.log("hello"),
      console.log("world"),
      (
        <TestGroup
          tesyState={this.props.testState}
          onUpdateSelectedTest={this.props.onUpdateSelectedTest}
        />
      )
    );
  };

  public render() {

    return (
      <div>
        <ul
          className="list-group"
          style={{
            marginTop: "20px",
            display: "inline-block"
          }}
        >
          {filterTest.map(filterTest => (
            <li
              className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              onClick={() => {
                this.props.onUpdateSelectedTest(filterTest);
                this.getModal();
              }}
            >
              {filterTest.testPN}: {filterTest.description}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Это мой QuestionGroup.tsx: я буду рендерить мод, но в качестве теста я простохочу посмотреть "Hello World"

export class QestionGroup extends React.Component<IProps> {

  public render() {
    //const onAfterOpenFn = () => {};
    //const onAfterCloseFn = () => {};

    return (
      <div>
        <h1>HELLO WORLD</h1>

      </div>
    );
  }
}

Answer 1

Метод onClick не отображает возвращаемые компоненты.

Вы должны добавить переменную state, чтобы показать / скрыть модальное значение:

interface IState {
  showModal: boolean;
}

export class ListGroup extends React.Component<IProps, IState> {
  // Define a state variable to show/hide the modal
  public state: IState = {
    showModal: false
  };

  showModal = () => {
    // Show the modal
    this.setState({ showModal: true });
  };

  public render() {
    const { showModal } = this.state;

    return (
      <div>
        <ul
          className="list-group"
          style={{
            marginTop: "20px",
            display: "inline-block"
          }}
        >
          {filterTest.map(filterTest => (
            <li
              className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              onClick={() => {
                this.props.onUpdateSelectedTest(filterTest);
                this.showModal(); // <-- Function has been renamed
              }}
            >
              {filterTest.testPN}: {filterTest.description}
            </li>
          ))}
        </ul>
        // Show the modal if showModal is true
        {showModal && (
          <TestGroup
            tesyState={this.props.testState}
            onUpdateSelectedTest={this.props.onUpdateSelectedTest}
          />
        )}
      </div>
    );
  }
}