When I first started working with React, I often needed to build components that could change based on user input or data. For example, I wanted a dashboard that updated automatically when new sales data came in, without reloading the page.
That’s when I discovered the power of dynamic components in React. They allow us to render different UI elements or even entire components based on variables, API data, or user actions.
In this tutorial, I’ll show you how to create dynamic components in ReactJS using a few different methods I’ve personally used in real-world projects.
What is a Dynamic Component in React?
A dynamic component is a React component that can change what it renders at runtime. This could mean:
- Displaying different components based on a condition.
- Rendering a list of components based on data from an API.
- Dynamically loading components when they’re needed (lazy loading).
In short, it’s about making your React app more flexible and interactive.
Method 1 – Use Props to Create Dynamic Components
One of the simplest ways to make a component dynamic is by using props. Props allow us to pass data from a parent component to a child component, which can then render different outputs based on those props.
Here’s a simple example.
Example: Dynamic Button Component
import React from "react";
function DynamicButton({ label, color }) {
const styles = {
backgroundColor: color,
border: "none",
padding: "10px 20px",
color: "#fff",
cursor: "pointer",
borderRadius: "5px",
};
return <button style={styles}>{label}</button>;
}
export default function App() {
return (
<div style={{ padding: "20px" }}>
<h2>Dynamic Button Example</h2>
<DynamicButton label="Buy Now" color="green" />
<DynamicButton label="Cancel" color="red" />
<DynamicButton label="Subscribe" color="blue" />
</div>
);
}I have executed the above example code and added the screenshot below.
- The DynamicButton component receives label and color as props.
- Each button renders differently based on the props passed from the parent.
- This is a simple but powerful way to make reusable, dynamic UI elements.
Method 2 – Conditional Rendering
Sometimes, you’ll want to display different components based on a certain condition, for example, showing a “Login” button if the user isn’t logged in, or a “Profile” button if they are.
Here’s how I do it.
Example: Conditional Rendering in React
import React, { useState } from "react";
function UserGreeting() {
return <h3>Welcome back, Alex!</h3>;
}
function GuestGreeting() {
return <h3>Please sign up to continue.</h3>;
}
export default function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div style={{ padding: "20px" }}>
<h2>Conditional Rendering Example</h2>
{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
<button
onClick={() => setIsLoggedIn(!isLoggedIn)}
style={{
marginTop: "10px",
padding: "10px 20px",
backgroundColor: "#007bff",
color: "#fff",
border: "none",
borderRadius: "5px",
}}
>
{isLoggedIn ? "Logout" : "Login"}
</button>
</div>
);
}I have executed the above example code and added the screenshot below.
- I used a Boolean state variable, isLoggedIn to control which component is shown.
- When the user clicks the button, the state toggles, and React re-renders the appropriate component.
- This is one of the most common ways to create dynamic UI in React apps.
Method 3 – Render Components Dynamically from Data
In many real-world applications, we don’t know ahead of time how many components we’ll need. For example, if you’re building a product listing page, the number of items depends on the data fetched from an API.
Here’s how you can dynamically render components based on an array.
Example: Dynamic List Rendering
import React from "react";
const products = [
{ id: 1, name: "Apple MacBook Pro", price: 1999 },
{ id: 2, name: "Dell XPS 15", price: 1799 },
{ id: 3, name: "HP Spectre x360", price: 1599 },
];
function Product({ name, price }) {
return (
<div
style={{
border: "1px solid #ccc",
padding: "10px",
marginBottom: "10px",
borderRadius: "5px",
}}
>
<h4>{name}</h4>
<p>Price: ${price}</p>
</div>
);
}
export default function App() {
return (
<div style={{ padding: "20px" }}>
<h2>Dynamic Product List</h2>
{products.map((item) => (
<Product key={item.id} name={item.name} price={item.price} />
))}
</div>
);
}I have executed the above example code and added the screenshot below.
- The products array contains data for each product.
- The map() function loops through the array and renders a Product component for each item.
- This method is perfect for dashboards, e-commerce apps, or any data-driven UI.
Method 4 – Dynamic Import (Lazy Loading Components)
In larger applications, you might not want to load all components at once. Instead, you can dynamically import components only when needed using React.lazy and Suspense.
Example: Dynamic Import in React
import React, { Suspense, useState } from "react";
const UserProfile = React.lazy(() => import("./UserProfile"));
export default function App() {
const [showProfile, setShowProfile] = useState(false);
return (
<div style={{ padding: "20px" }}>
<h2>Dynamic Import Example</h2>
<button
onClick={() => setShowProfile(!showProfile)}
style={{
padding: "10px 20px",
backgroundColor: "#28a745",
color: "#fff",
border: "none",
borderRadius: "5px",
}}
>
{showProfile ? "Hide Profile" : "Show Profile"}
</button>
<Suspense fallback={<p>Loading profile...</p>}>
{showProfile && <UserProfile />}
</Suspense>
</div>
);
}And here’s the UserProfile.js file:
import React from "react";
export default function UserProfile() {
return (
<div style={{ marginTop: "20px" }}>
<h3>John Doe</h3>
<p>Location: New York, USA</p>
<p>Email: [email protected]</p>
</div>
);
}I have executed the above example code and added the screenshot below.
- The component is loaded only when needed.
- It improves performance and reduces initial load time.
- Perfect for large apps or when dealing with rarely used pages.
Pro Tip – Combine Multiple Dynamic Techniques
In real projects, I often combine these techniques.
For example:
- Use props for customization.
- Use conditional rendering for logic.
- Use dynamic import for optimization.
This combination keeps the app fast, clean, and scalable.
When you start building dynamic components, you’ll notice how much more flexible your React apps become. Whether you’re creating a dashboard that updates in real time or a form that changes based on user input, these methods will help you do it efficiently.
I’ve used these exact techniques in several production apps for U.S.-based clients, and they’ve made maintenance and scalability much easier.
Once you get comfortable with these patterns, you’ll find yourself building more interactive and powerful React applications in no time.
You may also like to read:
- How to Use Card Component in React JS?
- Build a React Text Editor Component
- Build a Reusable React Component with Generic Type
- When Does a React Component Re-render?
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.
