Reactjs - How to open a new component?

coolestduck
December 30, 2023
173 views
0 votes
2 Answers

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;

Tags: reactjs typescript

Answers

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.

Yeah you can easily do that and get the desired functionality mentioned in the comments (having the new component replace the entire screen)

Below is code to do this with all the components in a single file(for example purposes), you can copy and paste this into a component folder to use it anywhere, and refer to it to update your code! (I added some super basic styles/css to make it an easier UI)

import React, { useState } from "react";

//first create type and months const (these normally go in a helper file)
type MonthModel = {
  month: string;
  passRate: number;
};
const months:MonthModel[] = [
  { month: "January", passRate: 80 },
  { month: "February", passRate: 75 },
];


//create MonthCard component for each item in the list (normally type and corresponding component goes in their own file
type MonthCardProps = {
  onClick: () => void;
  m: MonthModel;
};
const MonthCard = ({ onClick, m }: MonthCardProps) => {
  console.log("empty but with access to:", m);
  return (
    <div
      onClick={onClick}
      style={{
        width: "25%",
        backgroundColor: "darkviolet",
        color: "white",
        cursor: "pointer",
      }}
    >
      {m.month}
      {m.passRate}
    </div>
  );
};

//create MonthDetailPanel that we can toggle with changing data (again, it should go in its own file with type.)
type MonthDetailPanelProps = {
  isOpen: boolean;
  month?: string;
  passRate?: number;
  handleClose: () => void;
};
const MonthDetailPanel = ({
  month,
  passRate,
  handleClose,
}: MonthDetailPanelProps) => {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1>Full Screen Swap</h1>
      <p>
        Data: {month}&nbsp;{passRate}
      </p>
      <div
        style={{
          width: "200px",
          backgroundColor: "darkblue",
          color: "white",
          height: "50px",
          cursor: "pointer",
        }}
        onClick={handleClose}
      >
        <h4>Click to close.</h4>
      </div>
      <h5>Date Dashboard</h5>
    </div>
  );
};


//main Dashboard component (parent component/file)
export const Dashboard: React.FC = () => {
  const [showDetailPanel, setShowDetailPanel] = useState<{
    isOpen: boolean;
    month?: string;
    passRate?: number;
  }>({ isOpen: false });
  let i = 0;

  return showDetailPanel.isOpen === false ? (
    <div>
      <h1>Dashboard</h1>
      <div
        style={{
          width: "100%",
        }}
      >
        {months.map((m) => {
          i = i + 1; //make sure each child has unique key
          return (
            <div
              key={`item ${i}`}
              style={{
                padding: "10px",
                width: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                flexDirection: "column",
              }}
            >
              <MonthCard
                onClick={() =>
                  setShowDetailPanel(() => {
                    return {
                      isOpen: true,
                      month: m.month,
                      passRate: m.passRate,
                    };
                  })
                }
                m={m}
              />
            </div>
          );
        })}
      </div>
    </div>
  ) : (
    <MonthDetailPanel
      {...showDetailPanel}
      handleClose={() =>
        setShowDetailPanel((prev) => {
          return { ...prev, isOpen: false };
        })
      }
    />
  );
};

let me know if you have any questions, if you’re using tsx this should work on copy-paste, no extra libs were used

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – How to open a new component?

Answers