The first button:
const [open, setOpen] = useState(false);
return (
<>
<SideCart open={open} />
<CartButton open={open} onClick={() => setOpen(!open)}>
)
</>
The sidebar:
const [hide, setHide] = useState(open ? true : true);
return (
<SidecartContainer open={open} hide={hide}>
// Thats the second button
// I want to close the sidebar component with this button
<ExitButton hide={hide} onClick={() => setHide(!hide)}>
</SidecartContainer>
const SidecartContainer = styled.div`
transform: ${({ open, hide }) =>
open && hide ? "translateX(0)" : "translateX(100%)"};
`;
I have one button triggering the Open state of sidebar and when it opens I have an x button to close the sidebar.
It only works once.
What shall I use so whenever I click the open button to open and then when I click on close to hide?
It's made with styled-components.
I think your problem is that this line const [hide, setHide] = useState(open ? true : true); only runs once on component mount. What you need is a useEffect in the sidebar to listen for changes to open and apply them to the hide state like so:
const [hide, setHide] = useState(open ? true : true);
useEffect(() => {
setHide(!open);
}, [open]);
return (
<SidecartContainer open={open} hide={hide}>
--------Thats the second button
--------I want to close the sidebar component with this button
<ExitButton hide={hide} onClick={() => setHide(!hide)}>
</SidecartContainer>
I finally found what's the right way to do it and it works.
First I declared outside of the sidebar the useStates logic:
const [open, setOpen] = useState("");
const hide = () => setOpen("translateX(100%)");
const show = () => setOpen("translateX(0)");
then I passed the props to Sidecart.js:
const SideCart = (props) => {
return (
<SidecartContainer transform={props.transform} open={props.open}>
<ExitButton open={props.open} onClick={props.onClick}>
<CloseIcon />
</ExitButton>
<ProductCards>
<CartProductCard />
</ProductCards>
<Total></Total>
</SidecartContainer>
);
};
also this is important, in the styled component css I declared the prop value:
const SidecartContainer = styled.div`
transform: ${(props) => props.transform};
`;
Finally I changed the onClick functions accordingly:
<SideCart transform={open} open={open} onClick={hide} />
<CartButton open={open} onClick={show}>
Related
I want this popper to show when the "copy link" button is clicked to let the user know that it has been copied, but then disappear on its own after a second or two. Here is the code for the popper
import * as React from 'react';
import Box from '#mui/material/Box';
import Popper from '#mui/material/Popper';
export default function SimplePopper() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick}>
Copy Link
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
Link Copied
</Box>
</Popper>
</div>
);
}
You might be able to do something with setTimeout in handleClick.
Try modifying handleClick like so:
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
setTimeout(() => setAnchorEl(null), 3000);
};
I have two buttons. I can change its color by clicking on one button. And when you click on another button, change its color as well, and return the old color to the first button. Something like toggle. How can I implement such functionality in a react applicatio.
const [toggle, setToggle] = useState(false);
const toggleIt = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={toggleIt}>Button1</button>
<button onClick={toggleIt}>Button2</button>
)
somthing like this (codesandbox),
import classNames from "classnames";
import { useCallback, useState } from "react";
import "./styles.css";
export default function App() {
const [toggle, setToggle] = useState(false);
const toggleIt = useCallback(() => {
setToggle((toggle) => !toggle);
}, []);
return (
<div>
<button
onClick={toggleIt}
className={classNames({
"btn-act": toggle
})}
>
Btn A
</button>
<button
onClick={toggleIt}
className={classNames({
"btn-act": !toggle
})}
>
Btn B
</button>
</div>
);
}
const [toggle, setToggle] = useState(false);
const toggleIt = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={toggleIt} style={toggle ? {color: "blue"} : {color: "red"}}</button>
<button onClick={toggleIt} style={toggle ? {color: "pink"} : {color: "purple"}}</button>
</div>
)
Background
You can use the useEffect() hook to accomplish this feature depending on the button pressed. Just hold two states and flip them each time a different button is pressed, and with those two states you can use two separate functions to handle the onClick()'s.
The useEffect() hook automatically re-renders the component once any of the items in the dependency array at the end change, which will happen depending on the button pressed.
You can also directly set true/false values on your state variables with the second value that returns from useState(), and those state variables will automatically have their states updated without you manually assigning them.
There is very likely a better, more efficient way of doing it, but this is just a general guideline, if you will.
This is the code
const [toggleOne, setToggleOne] = useState(false);
const [toggleTwo, setToggleTwo] = useState(true);
const toggleFirst = () => {
setToggleOne(true);
setToggleTwo(false);
};
const toggleSecond = () => {
setToggleOne(false);
setToggleTwo(true);
};
useEffect(() => {
if (toggleOne) {
// Do something with first button pressed
} else if (toggleTwo) {
// Do something with second button pressed
}
}, [toggleOne, toggleTwo]);
return (
<div>
<button onClick={toggleFirst}>Button1</button>
<button onClick={toggleSecond}>Button2</button>
</div>
);
I have a ReactJS app with 4 screens/components. Each screen can link to another one.
I want to use Modals to display content of each screen, this way I don't lose the state of the current screen.
For now I just set the Modal on my 1st component :
<Modal show={this.state.show}
ref={this.ModalGlobal}
onHide={() => this.setState({show: false})}
>
<Modal.Body>
{this.state.id &&
<MyComponentB id={this.state.id} />
}
</Modal.Body>
</Modal>
On my ComponentB, I want to open the same Modal with different ID.
I tried to use references, but I don't know what to do with that in my ComponentB ?
Like :
this.ModalGlobal.current.destroy
Do I have to use Redux or can it be done using contexts or other solution ?
Instead of having one modal close another one and open that one, would it be possible to instead have the modal update its own contents based on the ID? You could make a wrapper for the modal that will update the body of the modal depending on the current ID. Something like this:
const MyModal = ({id}) => {
const [modalPage, setModalPage] = useState(id);
const [modalIsOpen, setModalIsOpen] = useState(false);
useEffect(() => {
setModalPage(id)
}, [id]);
const openModal = async () => {
setModalIsOpen(true);
document.body.style.overflowY = "hidden";
}
const closeModal = () => {
setModalIsOpen(false);
document.body.style.overflowY = "";
}
const modalPages = {
'welcome': <WelcomeComponent setModalPage />,
'products': <ProductsComponent setModalPage />,
'contact': <ContactComponent setModalPage />
}
const content = modalPages[modalPage];
return (
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
className="react-modal"
overlayClassName="react-modal-overlay"
>
{content}
</Modal>
);
}
I am trying to understand the best way of conditionally showing a Tooltip, based on if a sibling component Popper is open or not. I want to to show it by default on hover of its child the ButtonBase. I want the tooltip to never be open if the Popper is open. The tooltip title is acting as a summary of what's selected in the options list in the Popper when its closed, having it open with the Popper open is not ideal and cluttered. I am new to hooks so trying to understand how I can incorporate a hook to set the tooltipOpen state correctly with the conditional need.
export default function TooltipWithPopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const [value, setValue] = React.useState([options[1], options[11]]);
const [pendingValue, setPendingValue] = React.useState([]);
const [tooltipOpen, setTooltipOpen] = React.useState(false);
const handleClick = (event) => {
setPendingValue(value);
setAnchorEl(event.currentTarget);
setTooltipOpen(false);
};
const handleClose = (event, reason) => {
if (reason === "toggleInput") {
return;
}
setValue(pendingValue);
if (anchorEl) {
anchorEl.focus();
}
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "github-label" : undefined;
return (
<React.Fragment>
<div className={classes.root}>
<Tooltip title={value.map((i) => i.title).join(", ")}>
<ButtonBase
disableRipple
className={classes.button}
aria-describedby={id}
onClick={handleClick}
>
<span>Label</span>
{value.length}/{options.length}
</ButtonBase>
</Tooltip>
</div>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
placement="bottom-start"
className={classes.popper}
>
<Autocomplete
open
onClose={handleClose}
multiple
classes={{
paper: classes.paper,
option: classes.option,
popperDisablePortal: classes.popperDisablePortal
}}
value={pendingValue}
onChange={(event, newValue) => {
setPendingValue(newValue);
}}
disableCloseOnSelect
disablePortal
renderTags={() => null}
noOptionsText="No labels"
.....
/>
</Popper>
</React.Fragment>
);
}
Here is a demo of the tooltip being applied to the trigger element. How can I set it to only be open depending on another components' state? I've tried adding a setTooltipOpen(false) call when the handleClick is called when opens the Popper.
Demo: https://codesandbox.io/s/material-demo-forked-0wgyh?file=/demo.js:0-6181
You can control the Tooltip open prop value with your tooltipOpen state (implementation is up to you) and provide conditions that if the Popper is open, then automatically, the Tooltip open prop value computation will disregard the tooltipOpen state and assign false.
In my example below, I control the tooltipOpen state via onMouseEnter && onMouseLeave events
<Tooltip
open={open === true ? false : tooltipOpen}
title={value.map((i) => i.title).join(", ")}
>
<ButtonBase
disableRipple
className={classes.button}
aria-describedby={id}
onClick={handleClick}
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
>
<span>Label</span>
{value.length}/{options.length}
</ButtonBase>
</Tooltip>
Let's say we have a component Accordion that has an internal state isOpen, so you can close and open this component.
We now want to have a parent component that also has a state isOpen and has button. In this component, we have 2 times Accordion and we are passing to Accordion isOpen and we want that if the parent changes state isOpen Accordion accept this.
All component are functional components
const Accordion = ({ isOpen: parentIsOpen = false }) => {
const [isOpen, setIsOpen] = useState(parentIsOpen);
const handleSetIsOpen = () => setIsOpen(!isOpen);
return (
<div>
I'm open: {isOpen}
<button onClick={handleSetIsOpen}>toggle isOpen child</button>
</div>
);
};
const MasterComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleSetIsOpen = () => setIsOpen(!isOpen);
return (
<div>
<button onClick={handleSetIsOpen}>toggle isOpen parent</button>
<Accordion isOpen={isOpen} />
<Accordion isOpen={isOpen} />
</div>
);
};
In this case above Accordion will take on first render as the initial state parent isOpen prop. In case we press the button toggle isOpen parent we will change the parent state but children will not be updated.
To fix this we can use useEffect
const Accordion = ({ isOpen: parentIsOpen = false }) => {
const [isOpen, setIsOpen] = useState(parentIsOpen);
const handleSetIsOpen = () => setIsOpen(!isOpen);
useEffect(() => {
if (parentIsOpen !== isOpen) {
setIsOpen(parentIsOpen);
}
}, [parentIsOpen]);
return (
<div>
I'm open: {isOpen}
<button onClick={handleSetIsOpen}>toggle isOpen child</button>
</div>
);
};
const MasterComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleSetIsOpen = () => setIsOpen(!isOpen);
return (
<div>
<button onClick={handleSetIsOpen}>toggle isOpen parent</button>
<Accordion isOpen={isOpen} />
<Accordion isOpen={isOpen} />
</div>
);
};
in this case, children will be properly updated when a parent changes isOpen state.
There is one issue with this:
"React Hook useEffect has a missing dependency: 'isOpen'. Either include it or remove the dependency array react-hooks/exhaustive-deps"
So how to remove this issue that esLint is complaining and we do not want to put isOpen in this since it will cause bug.
in case we add isOpen into the array like this:
useEffect(() => {
if (parentIsOpen !== isOpen) {
setIsOpen(parentIsOpen);
}
}, [parentIsOpen, isOpen]);
We will have then a situation where we will click on the internal button in accordion and update the internal state then useEffect will run and see that parent has a different state than the child and will immediately set the old state.
So basically you have a loop where the accordion will never be open then.
The question is what is the best way to update the child state based on the parent state?
Please do not suggest to put all-state in parent and pass props without child state. this will not work since both Accordions in this example have to have their own state and be able to open and close in an independent way, but yet if parent says close or open it should listen to that.
Thank you!
Actually I would say this is way to do it
const Accordion = ({ isOpen: parentIsOpen = false }) => {
const [isOpen, setIsOpen] = useState(parentIsOpen);
const handleSetIsOpen = () => setIsOpen(!isOpen);
useEffect(() => {
setIsOpen(parentIsOpen);
}, [parentIsOpen]);
return (
<div>
I'm open: {isOpen}
<button onClick={handleSetIsOpen}>toggle isOpen child</button>
</div>
);
};
const MasterComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleSetIsOpen = () => setIsOpen(!isOpen);
return (
<div>
<button onClick={handleSetIsOpen}>toggle isOpen parent</button>
<Accordion isOpen={isOpen} />
<Accordion isOpen={isOpen} />
</div>
);
};
So just remove state check in a child component, let him update the state but since is updated with the same value it will not rerender or do some expensive behavior.
Tested it today and with a check, if states are different or without is the same, react takes care to not trigger rerender if the state that is updated is the same as before.
What you’re saying not to suggest is in fact the solution I would offer… You’ll need state to control isOpen for the parent component. Also, you should have separate methods in the parent that control state for each accordion, passed along to each accordion in props…
Not sure why you want separate state for the child components. I believe something like this would suffice.
const MasterComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const [isOpen1, setIsOpen1] = useState(false);
const [isOpen2, setIsOpen2] = useState(false);
const handleParentClose = () => {
setIsOpen(false);
setIsOpen1(false);
setIsOpen2(false);
}
return (
<div>
<button onClick={handleParentClose}>toggle isOpen parent</button>
<Accordion isOpen={isOpen1} setIsOpen={setIsOpen1} />
<Accordion isOpen={isOpen2} setIsOpen={setIsOpen2} />
</div>
);
};
const Accordion = props => {
return (
<div>
I'm open: {props.isOpen}
<button onClick={props.setIsOpen}>toggle isOpen child</button>
</div>
);
}
This doesn't include code for actual visibility toggle, but the state is there, including state that closes accordions on parent close.