element manipulation in react-CodePudding

So I have a series of code where a button in the Header.jsx file that if clicked, it will display the content of the Notification.jsx file. The problem here is, I don't exactly know how can I display the content of Notification.jsx in index.js. I tried using conditional statements and is it possible to hide the h1 element once the button is clicked?

Header.jsx

import React from "react";
import { Button } from "@mui/material";
import { IconButton } from "@mui/material";
import NotificationsIcon from "@mui/icons-material/Notifications";
import SearchIcon from "@mui/icons-material/Search";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import FullNotifList from "./FullNotifList"
export default function Header() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        <IconButton>
          <NotificationsIcon />
        </IconButton>
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button",
        }}
      >
        {/* Button needs to be clicked in order to display Notification.jsx */}
        <Button variant="contained">Notification Center</Button> 
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>

      <IconButton>
        <SearchIcon />
      </IconButton>
    </div>
  );
}

Notification.jsx

import React from "react";

export default function Notification(){
    return(
        <div>
            <ul>
                <li> Hello </li>
                <li> Hello </li>
                <li> Hello </li>
                <li> Hello </li>
            </ul>
        </div>
    )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import Header from './Header'
import './index.css'
import Footer from './Footer';
import Notification from './Notification';

export default function Page(props) {
    const [isClicked, setIsClicked] = React.useState(false)
    function showHide(e) {
        setIsClicked(true)
    };

    return(
        <div className='main'>
            <Header onClick={showHide}/>
                {isClicked && <Notification />}
                <h1> Sample body </h1>
            <Footer />
        </div>
    )
}

ReactDOM.render(
    <Page />,
  document.getElementById('root')
);

Here is the sandbox link: https://codesandbox.io/s/friendly-darkness-9u5s22?file=/src/index.js

CodePudding user response：

You just need to create a state property to handle if the element is visible or not (ex: showNotification ) defaulting to false:

const [showNotification, setShowNotification] = React.useState(false);

Then using the button click event to set it to true

<Button variant="contained" onClick={()=>{setShowNotification(true)}}>Notification Center</Button>

Then you implement conditional rendering by using the && operator inside JSX for the return, something like :

{showNotification && <Notification />}

CodePudding user response：

The problem is that your Header component doesn't have prop onClick, so nothing is executing.