how to hide a button in particular condition?

Question

How hide the button in a particular condition

{ !groupAccountPatientView && location.pathname.includes('group-accounts') && <button title="Main Patient" onClick={() =>browserHistory.push(`/patients/${patientInfo.PatientID}/`)} className="dashboard-patients-header_user"> <UserSolidIcon/> </button> || <div className="patients-header_extras"> <div className="patients-header_extras_switch"> {!groupAccountPatientView && <button title="Patient Group" onClick={() =>browserHistory.push(totalGroupedPatientCount >1 ? `/patients/${patientInfo.PatientID}/group-accounts`: '#')} className="patients-header_extras_group patients-header_extras_switch_button"> <PatientsGroupIcon /> <span>({totalGroupedPatientCount>1?totalGroupedPatientCount:0})</span> </button>} </div>

this is my condition

totalGroupedPatientCount !==0

When count equal to show doesn't have to show the button otherwise show it. How it possible??

Weather count has a numerical value or a character. Please update the qiestion — Naveen Heroorkar
– Naveen Heroorkar, Commented Aug 6, 2018 at 9:56

Paul McLoughlin · Accepted Answer · 2018-08-06 10:18:13Z

Here is one way of doing it, using a very contrived example.

class App extends React.Component { state = { showButton: false }; render() { const { showButton } = this.state; let button; if (showButton) { button = <button>Some Button</button>; } else { button = null; } return ( <div className="App"> {button} <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } }

You could also do it inline, which is what I prefer

class App extends React.Component { state = { showButton: true }; render() { const { showButton } = this.state; return ( <div className="App"> {showButton && <button> Hello </button>} <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } }

xadm · Accepted Answer · 2018-08-06 10:13:00Z

just insert (totalGroupedPatientCount !==0) && or !!totalGroupedPatientCount && before <button like you did with!groupAccountPatientView &&

toto · Accepted Answer · 2018-08-06 11:45:54Z

You can define a state totalGroupedPatientCount

And then you add this to show your component when the condition is true

{ this.state.showMyComponent && <MyComponent /> }

Collectives™ on Stack Overflow

how to hide a button in particular condition?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related