renderCustomComponent that can change or be removed after condition or state change

[minamedhat101]

Hello I was working with the widget and I wanted to put google login button in renderCustomComponent method and after the user logged in I wanted it to disappear is there a chance to put a feature like that or is there workaround to make this happen?

[adantoscano]

Maybe triggering dropMessages() It clears all message list.

[dennyjohnk]

How to remove a single custom component ?

[marieve-lapierre]

To remove a single custom component, you can give it a ref when rendering it, and add a state in the component's constructor to control how it's rendered.

App's constructor:

constructor(props) {
    super(props);
    this.CustomComponentElement = createRef();
  }

Rendering the component:

renderCustomComponent(CustomComponent, {
      ref: this.CustomComponentElement
    });

Making it disappear:

this.CustomComponentElement.current.setState({ erased: true });

Inside the custom component:

constructor(props) {
    super(props);
    this.state = { erased: false };
  }

render() {
    if (this.state.erased) {
      return null;
    }

    // Whatever else you usually put to render your component
    );
  }

[Bonfims]

To remove a single custom component, you can give it a ref when rendering it, and add a state in the component's constructor to control how it's rendered.

App's constructor:

constructor(props) {
    super(props);
    this.CustomComponentElement = createRef();
  }

Rendering the component:

renderCustomComponent(CustomComponent, {
      ref: this.CustomComponentElement
    });

Making it disappear:

this.CustomComponentElement.current.setState({ erased: true });

Inside the custom component:

constructor(props) {
    super(props);
    this.state = { erased: false };
  }

render() {
    if (this.state.erased) {
      return null;
    }

    // Whatever else you usually put to render your component
    );
  }

i'm using this solution, but when we use the toggle to hide and showup de chat window widget, all custom component come back to render

[Bonfims]

hi guys,

despite not being in the documentation, the method rendercustomComponent has a four parameter that is the id (customId), and with this we can use to call deleteMessages passing a id to identify a custom component that we want to remove.

exemple

class Button extends React.Component [...]

//... render your custom component
renderCustomComponent(Button, props, false, 'itsButton');

//... and 

deleteMessages(1,'itsButton');

[ahihussien]

class Button extends React.Component [...]

//... render your custom component
renderCustomComponent(Button, props, false, 'itsButton');

//... and 

deleteMessages(1,'itsButton');

@Bonfims That was very helpful, it works perfectly thanks