Issue
I am creating a dashboard in React using Typescript and Material UI which has months and a corresponding value shown besides the months. For this, I am using a React component that I have created "Dashboard". Upon clicking a particular month, I want to open another view (component) to show the user some different information. How can I do that? This is the code of my component till now. Specifically I would like to know how to update the handleMonthClick
method to open a new view when a month is selected.
import React from 'react';
import MonthCard from './MonthCard';
const Dashboard: React.FC = () => {
const months = [
{ month: 'January', passRate: 80 },
{ month: 'February', passRate: 75 },
// Add more months as needed
];
const handleMonthClick = (month: string) => {
console.log(`Clicked on ${month}`);
// You can add more logic here
};
return (
<div>
<h1>Dashboard</h1>
{months.map((m) => (
<MonthCard
key={m.month}
month={m.month}
passRate={m.passRate}
onClick={() => handleMonthClick(m.month)}
/>
))}
</div>
);
};
export default Dashboard;
Solution
You could create a state variable, set that state variable to the selected month, and then render some other component based on the month that is selected.
For example:
const Dashboard: React.FC = () => {
const [selectedMonth, setSelectedMonth] = useState(null);
const months = [
{ month: 'January', passRate: 80 },
{ month: 'February', passRate: 75 },
// Add more months as needed
];
const handleMonthClick = (month: string) => {
console.log(`Clicked on ${month}`);
setSelectedMonth(month);
// You can add more logic here
};
return (
<div>
<h1>Dashboard</h1>
{months.map((m) => (
<MonthCard
key={m.month}
month={m.month}
passRate={m.passRate}
onClick={() => handleMonthClick(m.month)}
/>
))}
{selectedMonth && <MyMonthDisplay month={selectedMonth} />}
</div>
);
};
Now create a new component MyMonthDisplay.jsx
that displays information for the passed in month
parameter.
Answered By - Greg Fenton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.