I'm creating a youtube clone using react js and i used this icon
import HomeIconfilled from '#mui/icons-material/Home';
import HomeIcon from '#mui/icons-material/HomeOutlined';
That looks like this HomeIconfilled
which gets rendered by calling this function
<Sidebariconfunc Icon={HomeIconfilled} Title="Home"/>
That takes 2 parameters and reder the icon
function Sidebariconfunc({Icon,Title}) {
return (
<div className='SidebarRow'>
<div className='Sidebar_Icon'>
<Icon/>
</div>
<div className='Slidebar_Title'>
{Title}
</div>
</div>
)
}
How can i chane the props name to HomeIcon when i click on the icon so that it changes to this this icon HomeIcon
Thamks !
function SidebarIcon({ActiveIcon, InactiveIcon, title, isActive}) {
return (
<div className='SidebarRow'>
<div className='Sidebar_Icon'>
{isActive ? <ActiveIcon/> : <InactiveIcon />
</div>
<div className='Slidebar_Title'>{Title}</div>
</div>
)
}
Usage:
const [isActive, setIsActive] = React.useState(false)
return (
<a onClick={() => setIsActive(!isActive)>
<SidebarIcon
ActiveIcon={HomeIconfilled}
InactiveIcon={HomeIcon}
title='Home'
isActive={isActive}
/>
</a>
)
Related
I am trying to create selected tab in Next.Js.
The User will have the option to search for data it can be Users or Posts, what the user will search for will be selected by clicking on one of the buttons.
Once the user clicks on the button the button will change background to blue.
However I can't make it to work properly, when the User clicks on the button the .Selected class gets added to the button but the button doesn't render the CSS.
import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'
import style from '../styles/Search.module.css'
const Search: PageWithLayout = () => {
const [searchPosts, setPostsSearch] = useState < String > ();
const setSearchOption = (searchFor: String) => {
let searchOption = '';
if (searchFor == 'POSTS') {
searchOption = 'POSTS';
} else {
searchOption = 'USERS';
let button = document.getElementById('usersOption') as HTMLElement;
button.className += style.Selected;
}
console.log(searchOption);
setPostsSearch(searchOption);
}
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...' />
</div>
<div className={style.SearchOptions}>
<button id='usersOption' onClick={() => setSearchOption('USERS')}>Users</button>
<button id='postsOption' onClick={() => setSearchOption('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)
}
Search.getLayout = function getLayout(page: ReactElement) {
return (
<MainLayout>
{page}
</MainLayout>
)
}
export default Search
you can use searchOption data for className style
import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'
import style from '../styles/Search.module.css'
const Search: PageWithLayout = () => {
const [searchPosts, setPostsSearch] = useState<String>();
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...'/>
</div>
<div className={style.SearchOptions}>
<button id='usersOption' className={searchPosts === 'USERS' ? style.Selected : undefined } onClick={() => setPostsSearch('USERS')}>Users</button>
<button id='postsOption' className={searchPosts === 'POSTS' ? style.Selected : undefined } onClick={() => setPostsSearch('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)
}
Search.getLayout = function getLayout(page: ReactElement){
return(
<MainLayout>
{page}
</MainLayout>
)
}
export default Search
Just have a state for active searchOption and apply the class conditionally directly into the JSX.
const [activeSearchOption, setActiveSearchOption] = useState('USERS')
return (
<>
<div className='pageContent'>
<div className={style.SearchBarContainer}>
<div className={style.SearchContainer}>
<i className="fa-solid fa-magnifying-glass"></i>
<input className={style.SearchBar} type={'text'} placeholder='Search...'/>
</div>
<div className={style.SearchOptions}>
<button id='usersOption' className={activeSearchOption === 'USERS' ? 'active' : ''} onClick={() => setSearchOption('USERS')}>Users</button>
<button id='postsOption' className={activeSearchOption === 'POSTS' ? 'active' : ''} onClick={() => setSearchOption('POSTS')}>Posts</button>
</div>
</div>
<div className='SearchedContent'>
</div>
</div>
</>
)
In ReactJS I want to call an onClick function on a button to open another website but it doesn't work. The following excerpt of the code is:
import PageButton from "./components/PageButton";
const openInNewTab = (url) => {
window.open(url, "_blank", "noopener,noreferrer");
};
return (
<div className="App">
<div className="appNav">
<div className="my-2 buttonContainer buttonContainerTop">
<PageButton name={"Home"} isBold={true} />
<PageButton
name={"Test"}
onClick={() => openInNewTab("https://www.bing.com/")}
/>
</div>
</div>
</div>
import React from "react";
const PageButton = (props) => {
return (
<div className="btn">
<span className={props.isBold ? "pageButtonBold hoverBold" : "hoverBold"}>
{props.name}
</span>
</div>
);
};
export default PageButton;
It should open the Webpage when I click on it but it doesn't.
If you need PageButton to handle the click, you should forward the click handler down like so:
const PageButton = (props) => {
return (
<div className="btn" onClick={props.onClick}>
<span className={props.isBold ? "pageButtonBold hoverBold" : "hoverBold"}>{props.name}</span>
</div>
);
};
export default PageButton;
Also, I would suggest you transform the div to button as it's the right element for handling clicks.
can you use tag a inside the button like this
<button .... > <a href="..." target="_blank"> text<a/> </button>
At PageButton component, you need to add click event for Warpper.
const PageButton = (props) => {
return (
<div className="btn" onClick={props.onClick}>
<span className={props.isBold ? "pageButtonBold hoverBold" : "hoverBold"}>
{props.name}
</span>
</div>
);
};
export default PageButton;
In a nutshell, i am creating a case study for a potential job, the employer wants me to use a React app to create it...
I want to create a button that has the start function that:
Hides original content
displays the hidden content,
i got the hidden content to show but the original content is still visible, any help?
my code below:
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
const [hide, setHidden] = useState(true);
return (
<>
<div className='container'>
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={ () => setShow(s => ! s) } className='btn'>Start!</button>
</div>
{/* URL Link Input */}
<div>
{!show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null }
</div>
</div>
</>
)
}
export default Body
You are close, you need to have the original content in the ternary so it's hidden once you toggle show. I also changed setShow to set show to false rather than the previous value since it doesn't matter because the button is not toggable because once you click it and can't re toggle the original content.
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
return (
<div className='container'>
{show ? (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(false)} className='btn'>Start!</button>
</div>
) : (
<form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form>
)
</div>
)
}
export default Body
it dose not need hide state and you can toggle visibility just with show state. try this:
{ show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null
}
This should work.
import React, { useState } from 'react';
function Body() {
const [show, setShow] = useState(false);
return (
<>
<div className="container">
{/* URL Link Input */}
<div>
{show ? (
<form action="GET">
<input type="text" />
<button className="btn">Submit</button>
</form>
) : (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(!show)} className="btn">
Start!
</button>
</div>
)}
</div>
</div>
</>
);
}
export default Body;
You could use an appStarted state and then render your component conditionnally:
const { useState } = React
function Body() {
const [appStarted, setAppStarted] = useState(false)
return (
<div className="container">
{appStarted ? (
<div>
<h2>Hidden Content</h2>
</div>
) : (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={ () => setAppStarted(true) } className='btn'>Start!</button>
</div>
)}
</div>
)
}
ReactDOM.render(<Body />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
in useStates, normally to set the color you would have to do setSelected(selected) to use that react hook, but it is never used like that below: How is setSelected being used so that it can change the color?
Is onSelectedChange a function that is equal to the function setSelected? A function receiving another function?
App.js
const options =[
{
label:'The color red',
value:'red'
},
{
label:'The color blue',
value:'blue'
},
{
label:'The color green',
value:'green'
}
];
export default () => {
const [selected, setSelected]=useState(options[0]);
return (
<div>
<Dropdown
selected={selected}
onSelectedChange={setSelected}
options = {options}/>
</div>
);
};
Dropdown.js
import React from 'react';
const Dropdown = ({options,selected, onSelectedChange})=>{
const renderedOptions = options.map((option)=>{
return (
<div key = {option.value}
className="item"
onClick={()=>onSelectedChange(option)}
>
{option.label}
</div>
)
});
return (
<div className="ui form">
<div className="field">
<label className="label">Select a color</label>
<div className="ui selection dropdown visible active">
<i className="dropdown icon"></i>
<div className="text">{selected.label}</div>
<div className="menu visible transition">
{renderedOptions}
</div>
</div>
</div>
</div>
);
};
It is passed to <Dropdown> component as onSelectedChange prop
<Dropdown
selected={selected}
onSelectedChange={setSelected}
options = {options}/>
Which is then invoked from the onClick handler onClick={()=>onSelectedChange(option)
I want to make a popup modal appear only once per visit (I don't want it to appear every time someone goes back to the index page). Is there a way to do this using hooks or is there a better method?
export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
{/* <div className={styles.popupInner}> */}
<div className={styles.popupInner}>
<div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
</div>
{/* </div> */}
</div>
)
}
You could do with localstorage and useEffect hook
why localstorage ?
You could achieve same result using useContext hook. But at the time of refresh.Hooks not hold the previous value.so better use localstorage to store the pop status
export default function Popup() {
const [visible, setVisible] = React.useState(false);
useEffect(()=>{
let pop_status = localStorage.getItem('pop_status');
if(!pop_status){
setVisible(true);
localStorage.setItem('pop_status',1);
}
},[])
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
{/* <div className={styles.popupInner}> */}
<div className={styles.popupInner}>
<div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
</div>
{/* </div> */}
</div>
)
}
export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup}>
<button onClick={() => setVisible(false)}>Click</button>
{ visible ? <div className={styles.popupInner}>
<div className={styles.popupInner}>
<div className={styles.buttonContainer}>
<Button color="danger" className={styles.button}>Okay</Button>
</div>
</div>
</div> : "" }
</div>
)
}