I have noticed that one of the most common tasks is showing a component only when a user interacts with a button.
Whether you are building a mortgage calculator for a US bank or a property detail view for a real estate portal, knowing how to toggle UI elements is a core skill.
In this tutorial, I will show you exactly how to render a React component when a button is clicked using several professional methods I use in my daily work.
Use the Logical AND (&&) Operator
The logical AND operator is my personal favorite when I need to show or hide a single component without an “else” condition.
It is clean, readable, and prevents you from writing unnecessary code when you don’t need a fallback UI.
Recently, while working on a project for a Texas-based logistics company, I used this method to show a “Shipment Details” component only after the dispatcher clicked a specific tracking ID.
Here is the complete code for this method:
import React, { useState } from 'react';
// This is the component we want to show
const ShippingDetails = () => {
return (
<div style={{ marginTop: '20px', padding: '15px', border: '1px solid #004a99', borderRadius: '8px' }}>
<h3>Current Shipment Status: In Transit</h3>
<p><strong>Origin:</strong> Houston, TX</p>
<p><strong>Destination:</strong> Chicago, IL</p>
<p><strong>Estimated Delivery:</strong> Oct 24, 2026</p>
</div>
);
};
const LogisticsApp = () => {
// State to track if the details should be shown
const [showDetails, setShowDetails] = useState(false);
const handleTrackClick = () => {
setShowDetails(true);
};
return (
<div style={{ padding: '40px', fontFamily: 'Arial' }}>
<h1>US Logistics Tracker</h1>
<p>Click the button below to see the detailed routing for Shipment #TX-9921.</p>
<button
onClick={handleTrackClick}
style={{ padding: '10px 20px', backgroundColor: '#004a99', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
>
Track Shipment
</button>
{/* Method: Logical AND rendering */}
{showDetails && <ShippingDetails />}
</div>
);
};
export default LogisticsApp;I executed the above example code and added the screenshot below.
Use the Ternary Operator for Toggle Functionality
When I need to switch between two different views, like toggling between a “Monthly Plan” and an “Annual Plan” for a US SaaS product, I always reach for the ternary operator.
The ternary operator allows you to provide a fallback or an alternative component if the condition is not met.
In my experience, this is the most robust way to handle “Toggle” buttons where the user might want to hide the component again after seeing it.
Here is how I implement a toggle for a premium subscription view:
import React, { useState } from 'react';
const PremiumFeatures = () => (
<div style={{ color: '#2e7d32', fontWeight: 'bold' }}>
✓ Unlimited Cloud Storage <br />
✓ 24/7 US-Based Priority Support <br />
✓ Advanced Analytics Dashboard
</div>
);
const StandardFeatures = () => (
<div style={{ color: '#666' }}>
✓ 5GB Cloud Storage <br />
✓ Email Support <br />
✓ Basic Reporting
</div>
);
const PricingPlan = () => {
const [isPremiumVisible, setIsPremiumVisible] = useState(false);
const toggleFeatures = () => {
setIsPremiumVisible(!isPremiumVisible);
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h2>Select Your Business Plan</h2>
<button
onClick={toggleFeatures}
style={{ marginBottom: '20px', padding: '12px 24px', fontSize: '16px' }}
>
{isPremiumVisible ? 'Show Standard Plan' : 'Show Premium Plan'}
</button>
<div style={{ padding: '20px', border: '2px solid #ddd', display: 'inline-block' }}>
{isPremiumVisible ? <PremiumFeatures /> : <StandardFeatures />}
</div>
</div>
);
};
export default PricingPlan;I executed the above example code and added the screenshot below.
Render Components Using a Switch Statement
For more complex applications, like a US Healthcare portal where a user might need to see “Patient Records,” “Lab Results,” or “Billing Info,” I prefer using a switch statement.
This method keeps the JSX return block clean and allows you to scale to many different components easily.
I often create a helper function inside the component to handle the logic, which makes the code much easier for a team to maintain.
Take a look at this multi-view example:
import React, { useState } from 'react';
const LabResults = () => <div><h4>Recent Lab Results:</h4><p>All values within normal US health guidelines.</p></div>;
const BillingInfo = () => <div><h4>Billing Department:</h4><p>No outstanding balance for your New York clinic visit.</p></div>;
const AppointmentHistory = () => <div><h4>History:</h4><p>Last checkup: Jan 15, 2026, at Mercy Hospital.</p></div>;
const PatientPortal = () => {
const [activeTab, setActiveTab] = useState('');
const renderActiveComponent = () => {
switch(activeTab) {
case 'labs':
return <LabResults />;
case 'billing':
return <BillingInfo />;
case 'history':
return <AppointmentHistory />;
default:
return <p>Please select a category to view details.</p>;
}
};
return (
<div style={{ padding: '30px', maxWidth: '600px', margin: '0 auto', border: '1px solid #ccc' }}>
<h2 style={{ color: '#003366' }}>Secure Patient Portal</h2>
<div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
<button onClick={() => setActiveTab('labs')}>View Labs</button>
<button onClick={() => setActiveTab('billing')}>View Billing</button>
<button onClick={() => setActiveTab('history')}>View History</button>
</div>
<div style={{ backgroundColor: '#f9f9f9', padding: '20px', minHeight: '100px' }}>
{renderActiveComponent()}
</div>
</div>
);
};
export default PatientPortal;In this article, I explained how to render a component on button click in React using the Logical AND operator, the Ternary operator, and Switch statements.
You may read:
- React Google Calendar Component
- How to Return a Component from a React Hook
- Implement Scroll to Component in React
- Parent-Child Component Communication in React
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
