Can't override renderBody method on SignupModal component

[mayask]

I created a custom component based on SignupModal:

import React from "react";
import {
  SignupModal
} from "neal-react";

export class FeedbackModal extends SignupModal {
  renderBody() {
    if (this.props.children) return this.props.children;
    return (
      <div>
        <SignupModal.Input name="name" label="Имя" placeholder="Имя"/>
        <SignupModal.Input type="email" name="email" required label="E-mail" placeholder="E-mail"/>
        <SignupModal.TextArea name="message" required label="Сообщение" placeholder="Сообщение"/>
      </div>
    );
  }
}

Then i'm using it like so:

<FeedbackModal title="Обратная связь" buttonText="Отправить" modalId="feedback-modal" onSubmit={onFeedback}/>
<p>
    <a className="btn btn-primary btn-ghost" data-toggle="modal" data-target="#feedback-modal">Оставить отзыв</a>
</p>

The problem is that the original renderBody is getting called.

I tried to override a render method as well to examine which class the renderBody's method prototype belongs to. It turns out it points to the original SignupModal class.

Why is this happening? I'm quite new to ES6, but haven't found anyone having similar issues. Is it because neal-react ships already transpiled code?

[capouch]

@myaskevich did you ever find a fix/workaround for this?

[mayask]

@capouch You can pass your own content as component's children like so:

<SignupModal title="Обратная связь" buttonText="Отправить" modalId="feedback-modal" onSubmit={onFeedback}>
  <div>
    <SignupModal.Input name="name" label="Имя" placeholder="Имя"/>
    <SignupModal.Input type="email" name="email" required label="E-mail" placeholder="E-mail"/>
    <SignupModal.TextArea rows="6" name="message" required label="Сообщение" placeholder="Сообщение"/>
  </div>
</SignupModal>