Issue with renderCustomContent

[lucasferreira]

Issue with renderCustomContent

[lucasferreira]

Hi @imouto2005

Now I get it. renderCustomContent was a contribution from other user to this lib, but I think it's easy to solve your problem.

I main render method you could change this:

render() {
    const { renderFlashMessageIcon, renderCustomContent, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    ...

In this:

render() {
    const { renderFlashMessageIcon, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    const renderCustomContent = this.prop(message, "renderCustomContent");
    ...

The this.prop method are made just to deal with when the props comes from message or come from the instance ;)

Could you try over there and tell if it works?

[lucasferreira]

Hi @imouto2005,

the renderCustomContent prop doens't receive a function, it receive only a React Node or Element, something like this:

renderCustomContent={<MyCustomEl />}

[imouto2005-zz]

Hi there,

Thanks for getting back to me. I mean that there is no renderCustomContent prop being passed into DefaultFlash as it is instead being passed inside the message prop. That's why the current code on line 228 {!!renderCustomContent && renderCustomContent()} doesn't display anything as renderCustomContent is null. I was only able to get my custom component to show up after changing it to {!!message.renderCustomContent && message.renderCustomContent()}.

[berman82312]

Hi, I ran into a similar issue recently on renderFlashMessageIcon when passing custom icon via the message object, which was passed to the showMessage function.

And thanks @lucasferreira, your solution in #51 (comment) solves the problem perfectly!

I changed

const { renderFlashMessageIcon, renderCustomContent, MessageComponent } = this.props;

into

const { renderCustomContent, MessageComponent } = this.props;

const renderFlashMessageIcon = this.prop(message, "renderFlashMessageIcon");

and solved the issue. 👍

[giacomocerquone]

@lucasferreira could you implement that or do you prefer a PR? Personally it seems wrong to pass customContent inside the component instantiation instead of passing it to the showMessage function

[federicomiralles]

Hi @imouto2005

Now I get it. renderCustomContent was a contribution from other user to this lib, but I think it's easy to solve your problem.

I main render method you could change this:

render() {
    const { renderFlashMessageIcon, renderCustomContent, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    ...

In this:

render() {
    const { renderFlashMessageIcon, MessageComponent } = this.props;
    const { message, visibleValue } = this.state;

    const style = this.prop(message, "style");
    const textStyle = this.prop(message, "textStyle");
    const renderCustomContent = this.prop(message, "renderCustomContent");
    ...

The this.prop method are made just to deal with when the props comes from message or come from the instance ;)

Could you try over there and tell if it works?

I can confirm it works as expected!

Personally I think this approach is more flexible than having it as part of FlashMessage component. Indeed passing the renderCustomContent as another message option makes it more customisable because allows to tailor the JSX to be rendered from anywhere when it's used to display messages globally.

@lucasferreira are you planning to release it any time soon?

BTW awesome work! Thanks!

Cheers,

Federico