React <Link> Button is not showering text that i declare - javascript

Currently, I facing issues that I code a word to display on my HTML webpage, but it's not showing.
but if I use inspect on my web browser and manually enter "sign up" its is able to appear on the homepage
import React, { useState } from 'react'
import {Link} from 'react-router-dom'
import {MdFingerprint} from 'react-icons/md'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
function Navbar() {
const [click,setClick]= useState(false);
const [button,setButton]= useState(true)
const handleClick = () => setClick(!click);
//const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960){
setButton(false)
} else {
setButton(true)
}
}
window.addEventListener('resize',showButton);
return (
<>
<div className="navbar">
<div className="navbar-container container">
<Link to='/Navbar1' className="navbar-logo">
<MdFingerprint className = "navbar-icon" />
UOW
</Link>
<div className="menu-icon" onClick={handleClick}>
{click ? <FaTimes/> : <FaBars/>}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className="nav-item">
<li className="nav-item">
<Link to='/' className="nav-links">
Home
</Link>
</li>
<li className="nav-item">
<Link to='/staff' className="nav-links">
Staff list
</Link>
</li>
<li className="nav-btn">
{button?(
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle='btn--outline'> SIGNUP </Button>
</Link>
):(
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle="btn--outline" buttonSize='btn--mobile'> SIGNUP </Button>
</Link>
)}
</li>
</li>
</ul>
</div>
</div>
</>
)
}
export default Navbar
As you can see I am able to make a button but the problem is that the text does not display on the button even in the google chrome inspect mode. I am unable to see the word "SIGNUP" in it
the result :
the word "sign up" does not shower in the button
Below here are my Button.js code
import React from 'react'
import './Button.css';
const STYLES= ['btn--primary', 'btn--outline']
const SIZES = ['btn--medium', 'btn--large', 'btn--mobile', 'btn--wide']
const COLOR = ['primary', 'blue', 'red', 'white']
export const Button = ({lecturer, type, onClick, buttonStyle, buttonSize,buttonColor}) =>{
const checkButtonStyle=STYLES.includes(buttonStyle)? buttonStyle :STYLES[0]
const checkButtonSize=STYLES.includes(buttonSize)? buttonSize :SIZES[0]
const checkButtonColor=STYLES.includes(buttonColor)? buttonColor :COLOR[0]
return (
<button className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonColor} ` } onClick={onClick} type={type}>{lecturer}</button>
)
}

Well, you accepting your inner button text as a prop name as lecturer, so according to your <Button> component you need to pass its string to it like this:
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle='btn--outline' lecturer='SIGNUP'></Button>
</Link>
NOTE: You can read more about props and components here.

Related

Profile picture should change in header when click from login page profile using react js

I have two Profile picture in login page, When i click profile 1 picture it takes me in home page and there profile picture should change as profile 1 picture in header. If i click profile 2 picture from login page it takes me in home page and there profile picture should change as profile 2 picture in header
Header Code:
import { useState } from "react"
import { NavLink } from 'react-router-dom'
import Profile from '../../images/login-profile-01.jpg'
import Profile2 from '../../images/login-profile-02.jpg'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faSignOut } from '#fortawesome/free-solid-svg-icons'
import Search from '../../component/Search'
import './style.scss'
const Header = () => {
const [isLoggedIn, setIsLoggedIn] = useState(true)
return (
<div className='header-wrapper'>
<div className='header-left'>
<h2>SmartGo</h2>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="movies">Movie</NavLink>
<NavLink to="tv-shows">Tv Shows</NavLink>
<NavLink to="themes">Themes</NavLink>
</nav>
</div>
<div className='header-right'>
<Search />
<div className='profile-wrapper'>
<div className='profile'>
{isLoggedIn ? <img src={Profile} alt={Profile} /> : <img src={Profile2} alt={Profile2} />}
</div>
<span>Pete</span>
</div>
<div className="logout">
<NavLink to="/login">
<FontAwesomeIcon icon={faSignOut} />
</NavLink>
</div>
</div>
</div >
)
}
export default Header
Home page code
import React from 'react'
import { useState } from 'react'
import Banner from '../../component/Banner'
import MoviePosterLeft from '../../component/Profile1/MoviePosterL'
import MoviePosterRight from '../../component/Profile1/MoviePosterR'
import './style.scss'
const Home = () => {
const [hidden, setHidden] = useState(false);
return (
<div>
<Banner />
<div className='movie-poster-splitted'>
<div className='movie-poster-left'>
<MoviePosterLeft />
</div>
<div className='movie-poster-right'>
<div className='button-toggle'>
<button onClick={() => setHidden(s => !s)}>
Based on search recommendations
</button>
</div>
{hidden ? <MoviePosterRight /> : ""}
</div>
</div>
</div>
)
}
export default Home

How to scroll and close the menu in React

I am using library(react-scroll) for scrolling on click in designing a website in react. when i open the website on mobile devices the menu bar should open and when i click on one of the item it should scroll and close that menu automatically.scroll was working fine in all devices but the menu was not closing.
navbar.js:
import React, {useEffect, useState} from 'react'
import { FaBars, FaTimes } from 'react-icons/fa'
import './Navbar.css'
import { Button } from '../components/Button/Button'
import { Link } from 'react-scroll'
const Navbar = () => {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick =() => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () =>{
if(window.innerWidth <= 960){
setButton(false)
}else {
setButton(true)
}
}
useEffect(() =>{
showButton();
},[]);
window.addEventListener('resize', showButton);
return (
<div className="navbar">
<div className='navbar-container cointainer'>
<Link to='/' className="navbar-logo" onClick={closeMobileMenu}>
<img src='/images/Gns-logo.png' className='navbar-icon'></img>
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes id='menu-close-icon' />:<FaBars/>}
</div>
<ul className={click ? 'nav-menu-active' : 'nav-menu'}>
<li className='nav-item nav-features' >
<Link to='section-features' className='nav-links'>
Features
</Link>
</li><li className='nav-item'>
<Link to='section-plans' className='nav-links'>
Pricing
</Link>
</li>
<li className='nav-item'>
<a className='nav-links' target="_blank" href="https://gns.com/about-us/">About Us</a>
</li><li className='nav-item'>
<a className='nav-links' target="_blank" href="https://gns.com/contact-us/">Contact Us</a>
</li>
<li className='nav-btn'>
{button ? (
<Link to='section-plans' spy={true} smooth={true} offset={50} duration={500} className='btn-link'>
<Button buttonStyle='btn--outline'>Try Now</Button>
</Link>
):(
<Link to='section-plans' spy={true} smooth={true} offset={50} duration={500} className='btn-link'>
<button className="button-try">Try Now</button>
</Link>
)}
</li>
</ul>
</div>
</div>
)
}
export default Navbar
Thanks.

element manipulation in react

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
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 />}
The problem is that your Header component doesn't have prop onClick, so nothing is executing.

Having An Issue With Fontawesome icons returning as boxes

So, Im trying to set up a hamburger menu setup where the icons appears when I shrink my browser down to a mobile size, and when the hamburger icon is clicked, its replaced with an X icon until I click it again to close the mobile menu. My issue is that even with the CDN appropriately placed in my index.html file, my icons are appearing as boxes. I've tried importing the library to my navbar page in a variety of different ways, but haven't been able to find out what exactly Ive done wrong. I did manage to get the faMonsterTruck icon to load, but how I got this icon to work is not working in my click event. My code for my navbar.js page looks as such:
import React, { useState, useEffect } from "react";
import "./navbar.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { Link } from "react-router-dom";
import { faTruckMonster } from "#fortawesome/free-solid-svg-icons";
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const showButton = () => {
if (window.innerWidth <= 960) {
setButton(false);
} else {
setButton(true);
}
};
useEffect(() => {
showButton();
}, []);
window.addEventListener("resize", showButton);
return (
<div>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
EPC
<FontAwesomeIcon icon={faTruckMonster} />
</Link>
<div className="menu-icon" onClick={handleClick}>
<i className={click ? "fas fa-times" : "fas fa-bars"} />
</div>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav-item">
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
Home
</Link>
</li>
<li>
<Link to="/zero" className="nav-links" onClick={closeMobileMenu}>
Year 0
</Link>
</li>
<li className="nav-item">
<Link to="/one" className="nav-links" onClick={closeMobileMenu}>
Year 1
</Link>
</li>
<li className="nav-item">
<Link to="/two" className="nav-links" onClick={closeMobileMenu}>
Year 2
</Link>
</li>
<li className="nav-item">
<Link to="/three" className="nav-links" onClick={closeMobileMenu}>
Year 3
</Link>
</li>
<li className="nav-item">
<Link to="/four" className="nav-links" onClick={closeMobileMenu}>
Year 4
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
In case it's difficult to locate where I need help exactly, the click event code I referenced is this snippet here:
<div className="menu-icon" onClick={handleClick}>
<i className={click ? "fas fa-times" : "fas fa-bars"} />
</div>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav-item">
I know that I have some useless code in there for button calls. Im cleaning up the page as I go, as my plans for how I want my page to appear have changed a couple times.

Cache Image in react.js then image not appearing

I was planning to upload my React.js website into GitHub. then I enter npm cache clean --force into the terminal and then now all my image is in cache image. none of my images is loading up but the other information and animation are still working. how do I fix this problem? thanks
the images is under className='navbar-container container location.
import React, { useState, useEffect } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
function Navbar() {
const [click,setClick]= useState(false);
const [button,setButton]= useState(true)
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960){
setButton(false)
} else {
setButton(true)
}
};
useEffect(() => {
showButton();
}, []);
window.addEventListener('resize',showButton);
return (
<>
<IconContext.Provider value ={{color: "#fff"}}>
<nav className='navbar'>
<div className='navbar-container container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<img src="/images/UOWMKDU-logb.png"
alt="UOWKDU Logo" width="35%" height="85%" className='navbar-icon' />
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
Services
</Link>
</li>
<li className='nav-btn'>
{button ? (
<Link to='/sign-up' className='btn-link'>
<Button buttonStyle='btn--outline' >SIGN UP</Button>
</Link>
) : (
<Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
<Button
buttonStyle='btn--outline'
buttonSize='btn--mobile'
>
SIGN UP
</Button>
</Link>
)}
</li>
</ul>
</div>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar
Fixed:
I recreate an new react.js folder and copy and paste the old one to the new one. because of packages.json have some issues. i think it might be some packages missing. but after make a new react.js file and copy and paste back. everything is fine

Categories