Conditional button not rendering correctly

[Laurin S]

Hi,

I have two buttons that are displayed alternately, i.e. if the if-condition is true, button1 is displayed, otherwise button2. Unfortunately, the button that is to be displayed in a second moment is not displayed correctly. It is missing some css classes when it is displayed and therefore doesn't look as expected. The problem can be simulated with the following demo code:

import * as React from "react";

import { render } from "react-dom";

import { ButtonComponent } from "@syncfusion/ej2-react-buttons";

export const Test = () => {

  const [showFirstButton, setShowFirstButton] = React.useState(true);

  const click = () => {

    setShowFirstButton(false);

  };

  return (

    <div className="control-pane">

      <div className="control-section">

        <div className="button-section">

          <div id="button-control">

            <div className="row">

              <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">

                <div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">

                  {showFirstButton ? (

                    <ButtonComponent className="e-primary" onClick={click}>

                      First Button

                    </ButtonComponent>

                  ) : (

                    <ButtonComponent className="e-success"> //-- gets not visualized properly

                      Second Button

                    </ButtonComponent>

                  )}

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  );

};

render(<Test />, document.getElementById("sample"));

The "Second Button" gets visualized in the following way:

instead of 

Do you have any hint for me?

[Aravinthan Seetharaman]

Hi Laurin, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We suspect that the cause of the issue is you are using ClassName instead of cssClass property. We have prepared sample with cssClass property below. 

 

 

import * as React from "react"; 

import { render } from "react-dom"; 

import { ButtonComponent } from "@syncfusion/ej2-react-buttons"; 

import "./index.css"; 

export const Test = () => { 

  const [showFirstButton, setShowFirstButton] = React.useState(true); 

  const click = () => { 

    setShowFirstButton(false); 

  }; 

  return ( 

    <div> 

      <h4>Conditional Button Rendering</h4> 

      {showFirstButton ? ( 

        <ButtonComponent cssClass="e-primary" onClick={click}> 

          First Button 

        </ButtonComponent> 

      ) : ( 

        <ButtonComponent cssClass="e-success">Second Button</ButtonComponent> 

      )} 

    </div> 

  ); 

}; 

render(<Test />, document.getElementById("sample")); 

 

 

Sample: https://stackblitz.com/edit/react-qphwbu-fnxgkq?file=index.js  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S 

[Laurin S]

Thanks, works perfectly.

Just to know: Whats the difference between the two properties "className" and "cssClass", which in many controls are both present?

[Aravinthan Seetharaman]

Hi Laurin, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. 

 

Query: Whats the difference between the two properties "className" and "cssClass", which in many controls are both present? 

 

Ans: 

className	cssClass
This is the react specific attribute used to specify css style as like normal class attribute.	This is Syncfusion Button control property used to specify css class for the Button control.
Reference: https://reactjs.org/docs/dom-elements.html#classname	Reference:  Button API cssClass

 

 

By using this cssClass property we are processing and rendering our Button control. 

 

Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S