We Keep Coding

How can I call "useSate(false)" in React from a nested component?

How can I call "useSate(false)" in React from a nested component?
I would like to close the sidebar when one of the sidebar items is clicked. For that I need to call the onclick function setOpen(true) from the parent component.
function SearchDropdown() {
const [open, setOpen] = useState(false);
return (
<>
<div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
{open && <>
<div className="searchBarDropdown"><SearchBar></SearchBar></div>
<div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
</>}
</>
);
}
function MenuSidebar() {
const [open, setOpen] = useState(false);
return (
<>
<div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
{open && <>
<div className="menuSidebar">
<h3 className="backwardsSection" onClick={() => setOpen(false)}>🠔 Go Back</h3>
<MenuSidebarItems />
<h3 className="sidebarTopics">Topics</h3>
<TopicItems />
</div>
<div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
</>}
</>
);
}
function MenuSidebarItems() {
return (
<>
<MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
</>
);
}
function MenuSidebarItem(props) {
const navigate = useNavigate();
return (
<button className="menuItem" onClick={() => {
navigate("/" + props.children.toString().toLowerCase());
}}>
<span className="leftIcon">{props.leftIcon}</span>
{props.children}
<span className="rightIcon">{props.rightIcon}</span>
</button>
);
}
Thanks, Martin

You need to pass the setState that close the navbar as props to the component that display the menu.
function SearchDropdown() {
const [open, setOpen] = useState(false);
return (
<>
<div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
{open && <>
<div className="searchBarDropdown"><SearchBar></SearchBar></div>
<div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
</>}
</>
);
}
function MenuSidebar() {
const [open, setOpen] = useState(false);
return (
<>
<div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
{open && <>
<div className="menuSidebar">
<h3 className="backwardsSection" onClick={() => setOpen(false)}>🠔 Go Back</h3>
<MenuSidebarItems setOpen={setOpen}/>
<h3 className="sidebarTopics">Topics</h3>
<TopicItems />
</div>
<div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
</>}
</>
);
}
function MenuSidebarItems(props) {
const {setOpen} = props
return (
<>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
</>
);
}
function MenuSidebarItem(props) {
const navigate = useNavigate();
const {setOpen} = props
return (
<button className="menuItem" onClick={() => {
setOpen={flase}
navigate("/" + props.children.toString().toLowerCase());
}}>
<span className="leftIcon">{props.leftIcon}</span>
{props.children}
<span className="rightIcon">{props.rightIcon}</span>
</button>
);
}

Smooth animation when turning off a conditionally rendered component in React

My App.js is as below
export const App = () => {
const [toggled, setToggled] = useState(false);
const [ordering, setOrdering] = useState(false);
const handleColorModeClick = () => {
setToggled((s) => !s);
};
const handleOrdering = () => {
setOrdering((s) => !s);
};
return (
<Ordering.Provider value={{ ordering: ordering }}>
<div className={`app ${toggled ? "theme-dark" : "theme-light"}`}>
<Switch>
<Route path="/" exact>
<HeaderComponent toggled={toggled} onClick={handleColorModeClick} />
<div>components2</div>
<EateryInfo toggled={toggled} />
{/* <CategoryItems toggled={toggled} /> */}
<MenuButton toggled={toggled} />
</Route>
<Route path="/menu">
<HeaderComponent toggled={toggled} onClick={handleColorModeClick} />
<CategoryItems toggled={toggled} />
<CheckBox
text="Start Ordering"
standAlone={true}
handleOrdering={handleOrdering}
/>
<MenuButton toggled={toggled} />
</Route>
</Switch>
</div>
</Ordering.Provider>
);
};
I set the state of ordering variable using a checkbox
Then I use this to conditionally render the QuantityChange component like so
export const MenuEntry = ({ mealData, toggled }: MenuEntryProps) => {
const orderingEnabled = useContext(Ordering);
return (
<div className="menu-entry">
<MenuItem oneMenuItem={mealData} toggled={toggled} />
{orderingEnabled.ordering ? <QuantityChange toggled={toggled} /> : ""}
</div>
);
};
All this works fine & the component is render as desired.
I want to have a smooth transition of entry & exit of this component. The animation on entry works just fine but I am not able to figure out how to get the exit animation working.
The video is what is happening now can be found in the video here https://youtu.be/5kl1wCBwR_U (the checkbox is at the right bottom hand corner)
I looked at several online forums to find an answer to this but I am unable to figure it out.
I tried usiing react-transition-group as well but no luck
export const QuantityChange = ({ toggled }: QuantityChangeProps) => {
const orderingEnabled = useContext(Ordering);
const duration = 500;
return (
<Transition in={orderingEnabled.ordering} timeout={duration} appear>
{(status) => (
<div
className={`quantity-change flex ${
toggled ? "theme-dark" : "theme-light"
} fade-${status}`}
>
<span className="add-quantity">+</span>
<span className="quantity">0</span>
<span className="subtract-quantity">-</span>
</div>
)}
</Transition>
);
};
I looked at onAnimationEnd but was unable to figure it out.

Looks like you need a simple Accordion thingy.
You could try something like that (snippet below).
One of the main moments here is setting the height to the auto value. It allows the content to change, and it won't strict its dimensions.
AccordionItem conditionally renders its children. If it should be closed and the animation is over, then no children will be rendered.
const AccordionItem = (props) => {
const { className, headline, open, children } = props
const [height, setHeight] = React.useState(0)
const [isOver, setOver] = React.useState(false)
const bodyRef = React.useRef(null)
const getDivHeight = React.useCallback(() => {
const { height } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : {}
return height || 0
}, [])
// set `auto` to allow an inner content to change
const handleTransitionEnd = React.useCallback(
(e) => {
if (e.propertyName === 'height') {
setHeight(open ? 'auto' : 0)
if (!open) {
setOver(true)
}
}
},
[open]
)
React.useEffect(() => {
setHeight(getDivHeight())
setOver(false)
if (!open) {
requestAnimationFrame(() => {
requestAnimationFrame(() => setHeight(0))
})
}
}, [getDivHeight, open])
const shouldHide = !open && isOver
return (
<div style={{overflow: 'hidden'}}>
<div
style={{ height, transition: "all 2s" }}
onTransitionEnd={handleTransitionEnd}
>
<div ref={bodyRef}>
{shouldHide ? null : children}
</div>
</div>
</div>
)
}
const App = () => {
const [open, setOpen] = React.useState(false)
return (
<div>
<button onClick={() => setOpen(isOpen => !isOpen)}>toggle</button>
<table style={{width: '100%'}}>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
</table>
</div>
)
}
ReactDOM.render(<App />, 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>
<div id="root"></div>

Formik Field Array field's id change when wrap with modal

I'm using Formik with chakra UI to create dynamic forms using the Fomrik Field array. and I Open my form in Chakra modal, problem is when I open my form in modal it change field name and id to array last object id , When i remove modal its works as expected, I Recreated my problem here
my code sample
<Box>
{/* start card grid */}
<Box py="12" px={{ base: "6", md: "0" }}>
<FormikProvider value={formik}>
<Box as="section" maxW={{ base: "xs", md: "full" }} mx="auto">
<form onSubmit={formik.handleSubmit}>
<SimpleGrid
columns={{ base: 1, sm: 1, md: 3, xl: 4 }}
spacing="6"
>
<FieldArray name="locations">
{() =>
formik.values?.locations?.map(
(props: any, index: string) => {
const { location, reviews } = props;
return (
<>
<Modal
isOpen={isOpen}
onClose={onClose}
>
<ModalOverlay />
<ModalContent>
<ModalCloseButton />
<ModalBody >
<>
<FormLabel>Page URL</FormLabel>
<InputGroup size="md">
<InputLeftAddon
borderTopEndRadius={0}
borderBottomEndRadius={0}
borderColor="grayExtend.300"
bg="grayExtend.100"
fontSize="0.8rem"
px={2}
>
{modal.urlPrefix}
</InputLeftAddon>
<>
<Input
name={`locations.${index}.facebookUrl`}
value={
formik.values.locations[
index
].facebookUrl
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder="facebook name"
type="text"
borderWidth="1.5px"
fontSize="0.8rem"
borderColor="grayExtend.300"
borderTopStartRadius={0}
borderBottomStartRadius={
0
}
/>
<Box
fontSize="0.875rem"
color="red"
mt={2}
>
</Box>
</>
</InputGroup>
</>
</ModalBody>
<ModalFooter mb={4}>
<Button
key={`btn${
Math.random() * 1000
}`}
id={modal.web}
colorScheme="blue"
border="1px"
isFullWidth
type="submit"
_hover={{ bg: "#152aa3" }}
disabled={formik.isSubmitting}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
<Flex
direction="column"
alignItems="center"
rounded="md"
padding="8"
position="relative"
shadow="base"
id={index}
>
<Box
position="absolute"
inset="0"
height="20"
roundedTop="inherit"
/>
<VStack
spacing="4"
mt={3}
>
{buttons.map(
({ title, id, icon }) => (
<Button
key={id+1}
id={id}
colorScheme="grayExtend.100"
borderWidth="1px"
borderColor="grayExtend.300"
variant="outline"
p="10px"
borderRadius="4px"
minH="60px"
minW="300px"
onClick={(e) =>
handleOpenModal(e)
}
className={
formik.values.locations[index]
.facebookUrl &&
formik.errors &&
formik.errors.locations &&
getIn(
formik.errors,
`locations.${index}.facebookUrl`
) &&
"success"
}
display="flex"
justifyContent="start"
bg="#f5faff"
fontSize="0.875rem"
>
{title}
</Button>
)
)}
</VStack>
</Flex>
</>
);
}
)
}
</FieldArray>
</SimpleGrid>
</form>
</Box>
</FormikProvider>
</Box>
{/* end card grid */}
</Box>

as I can see you create modal views for each field. This is not a bad solution but it is better to make one modal and give it data to display (I take out the modal component from the map cycle)
Now the main problem to set special data for each button. I add the state new field id.
In formik inputs change values and names to locations[${modal.id}].facebookUrl
The reason, why are you getting last modal is not controlling it's statement. There is now field which says React not to show 2nd,3nd or other components, so there are 4 modals on each other. You can also use your code but add condition which will hide or show your modal view for example
modal.id === idx && <Modal/>
Also link of this code
import {
Box,
useDisclosure,
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalOverlay,
SimpleGrid,
Flex,
VStack,
FormLabel,
Input,
InputGroup,
InputLeftAddon,
ModalFooter
} from "#chakra-ui/react";
import { FieldArray, getIn, useFormik, FormikProvider } from "formik";
import * as React from "react";
const Form = () => {
const [modal, setModal] = React.useState({
web: "",
urlPrefix: "",
id: 0
});
const { isOpen, onOpen, onClose } = useDisclosure();
const cardData: any = {
locations: [
{
facebookUrl: "fb 1"
},
{
facebookUrl: "fb2"
},
{
facebookUrl: ""
},
{
facebookUrl: ""
}
]
};
const buttons = [
{
id: "facebook",
title: "Facebook",
icon: ""
}
];
// modal func
const handleOpenModal = (e: any, idx: number) => {
const { id } = e.target;
if (id === "facebook") {
setModal({
...modal,
web: "facebook",
urlPrefix: "facebook.com",
id: idx
});
} else return null;
onOpen();
return null;
};
const formik = useFormik({
initialValues: cardData,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
}
});
return (
<Box>
{/* start card grid */}
<Box py="12" px={{ base: "6", md: "0" }}>
<FormikProvider value={formik}>
<Box as="section" maxW={{ base: "xs", md: "full" }} mx="auto">
<form onSubmit={formik.handleSubmit}>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalCloseButton />
<ModalBody>
<>
<FormLabel>Page URL</FormLabel>
<InputGroup size="md">
<InputLeftAddon
borderTopEndRadius={0}
borderBottomEndRadius={0}
borderColor="grayExtend.300"
bg="grayExtend.100"
fontSize="0.8rem"
px={2}
>
{modal.urlPrefix}
</InputLeftAddon>
<>
<Input
name={`locations[${modal.id}].facebookUrl`}
value={
formik.values.locations[modal.id].facebookUrl
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder="facebook name"
type="text"
borderWidth="1.5px"
fontSize="0.8rem"
borderColor="grayExtend.300"
borderTopStartRadius={0}
borderBottomStartRadius={0}
/>
<Box fontSize="0.875rem" color="red" mt={2}></Box>
</>
</InputGroup>
</>
</ModalBody>
<ModalFooter mb={4}>
<Button
key={`btn${Math.random() * 1000}`}
id={modal.web}
colorScheme="blue"
border="1px"
isFullWidth
type="submit"
_hover={{ bg: "#152aa3" }}
disabled={formik.isSubmitting}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
<SimpleGrid
columns={{ base: 1, sm: 1, md: 3, xl: 4 }}
spacing="6"
>
<FieldArray name="locations">
{() =>
formik.values?.locations?.map(
(props: any, index: number) => {
const { facebookUrl } = props;
return (
<>
<Flex
direction="column"
alignItems="center"
rounded="md"
padding="8"
position="relative"
shadow="base"
id={index}
>
<Box
position="absolute"
inset="0"
height="20"
roundedTop="inherit"
/>
<VStack spacing="4" mt={3}>
{buttons.map(({ title, id, icon }) => (
<Button
key={id + 1}
id={id}
colorScheme="grayExtend.100"
borderWidth="1px"
borderColor="grayExtend.300"
variant="outline"
p="10px"
borderRadius="4px"
minH="60px"
minW="300px"
onClick={(e) => handleOpenModal(e, index)}
className={
formik.values.locations[index]
.facebookUrl &&
formik.errors &&
formik.errors.locations &&
getIn(
formik.errors,
`locations.${index}.facebookUrl`
) &&
"success"
}
display="flex"
justifyContent="start"
bg="#f5faff"
fontSize="0.875rem"
>
{title}
</Button>
))}
</VStack>
</Flex>
</>
);
}
)
}
</FieldArray>
</SimpleGrid>
</form>
</Box>
</FormikProvider>
</Box>
{/* end card grid */}
</Box>
);
};
export default Form;

React Hooks : Change state of multiple items

I have a list of icons.
When I click on one of them, I want it to :
1/ change state to day or night
2/ change icon image to a sun or a moon.
But with the code that I've written, if I click on one, it changes all the icons image and only one state is linked to all.
How can I do so each icons has it own state and when i click on icon, only the icon clicked changes to a moon or a sun and not all of them ?
My code :
export default function MyModal() {
const [isVisible, setVisible] = useState(false);
const [isDay, setDay] = useState(true);
const { RangePicker } = DatePicker;
const { Option } = Select;
const style = {
verticalAlign: "middle",
marginRight: 10,
};
function handleDayNight() {
isDay === true ? setDay(false) : setDay(true);
console.log("isDay =", isDay);
}
function handleSelectChange(value) {
console.log(`selected ${value}`);
}
function handleCheckChange(checkedValues) {
console.log("checked =", checkedValues);
}
return (
<div>
<Button type="primary" onClick={() => setVisible(true)}>
Add an exception
</Button>
<Modal
title="Add an exception"
style={{ top: 20 }}
visible={isVisible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
>
<p>Exceptions name</p>
<Input placeholder="80% Wednesday" />
<p style={{ marginTop: 10 }}>Select date</p>
<RangePicker onChange={([date]) => console.log(date)} />
<p style={{ marginTop: 10 }}>Frequency</p>
<Select
defaultValue="Weekly"
style={{ width: 120 }}
onChange={handleSelectChange}
>
<Option value="daily">Daily</Option>
<Option value="weekly">Weekly</Option>
<Option value="monthly">Monthly</Option>
</Select>
<Divider />
<Checkbox.Group style={{ width: "100%" }} onChange={handleCheckChange}>
<div>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Monday">Monday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Tuesday">Tuesday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Wednesday">Wednesday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Thursday">Thursday</Checkbox>
<br></br>
<Checkbox value="Friday">Friday</Checkbox>
<br></br>
<Checkbox value="Saturday">Saturday</Checkbox>
<br></br>
<Checkbox value="Sunday">Dimanche</Checkbox>
</div>
</Checkbox.Group>
</Modal>
</div>
);
}

Use a separate component for each of those, so you can have individual separate states inside those components. Eg, replace all of
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
with
<SunMoon style={style} />
const SunMoon = ({ style }) => {
const [isDay, setDay] = useState(true);
const handleDayNight = () => setDay(!isDay);
return isDay
? <Sun style={style} onClick={handleDayNight} />
: <Moon style={style} onClick={handleDayNight} />;
};

Material-UI how to get the value of SelectField inside const

Actually, my Drawer has a few fields including SelectField but I stuck on getting the value and the onChange part of the Field. and here's my code:
const DrawerCargoAddItem = (props) => {
let { navDrawerOpen } = props;
return (
<Drawer docked={true} width={500} open={navDrawerOpen}>
<div style={styles.logo}>
Fleetcat Web
</div>
<div>
<PageBase title={<Link to="dashboard"><img src="./images/fleetcat.png"/></Link>} style={page}>
<SelectField
floatingLabelText="Category"
fullWidth={true}
value="">
<MenuItem key={0} primaryText="Food and Beverages"/>
<MenuItem key={1} primaryText="Medium"/>
<MenuItem key={2} primaryText="Large"/>
</SelectField>
<Paper style={papers} zDepth={5} >
<Link to="dashboard">
<FlatButton label="Tap to add Items" style={flatbutton}
onClick={() => { alert('foo');
console.log("Success");}}/>
</Link>
</Paper>
</PageBase>
</div>
</Drawer>
);
};
DrawerCargoAddItem.propTypes = {
navDrawerOpen: PropTypes.bool,
menus: PropTypes.array,
username: PropTypes.string,
};
export default DrawerCargoAddItem;

You create a simple function and what you need is a React Component:
import React from 'react';
export default class DrawerCargoAddItem extends React.Component {
state = {
value: 0
};
handleChange = (event, index, value) => this.setState({value});
render() {
let {navDrawerOpen} = this.props;
const {value} = this.state
return (
<Drawer docked={true} width={500} open={navDrawerOpen}>
<div style={styles.logo}>
Fleetcat Web
</div>
<div>
<PageBase
title={< Link to = "dashboard" > <img src="./images/fleetcat.png"/> < /Link>}
style={page}>
<SelectField
floatingLabelText="Category"
fullWidth={true}
value={value}
onChange={this.handleChange}>
<MenuItem value={0} key={0} primaryText="Food and Beverages"/>
<MenuItem value={1} key={1} primaryText="Medium"/>
<MenuItem value={2} key={2} primaryText="Large"/>
</SelectField>
<Paper style={papers} zDepth={5}>
<Link to="dashboard">
<FlatButton
label="Tap to add Items"
style={flatbutton}
onClick={() => {
alert('foo');
console.log("Success");
}}/>
</Link>
</Paper>
</PageBase>
</div>
</Drawer>
);
}
}
Basically you now have access to the full React lifecycle. The current value is now saved in the component's state.

Here it is
<SelectField floatingLabelText="Category"
fullWidth={true}
value=""
onChange={this.handleChanges}>
<MenuItem key={0} value="Food and Beverages" primaryText="Food"/>
<MenuItem key={1} value="Medium" primaryText="Medium"/>
<MenuItem key={2} value="Large" primaryText="Large"/>
</SelectField>
here is handle change event function which should be written:
handleChanges = (e, index, value) => {
alert(value);
}

For me worked this syntax : onBlur={event => { handleChange(event) } }
<Autocomplete
id="size-small-standard"
size="small"
options={lOrigens}
defaultValue={{ title: props.value }}
getOptionLabel={option => option.title}
onBlur={e => { handleChange(e, props, { setChanging: setCurrentChangingItem1, i}) }}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Origens1"
placeholder="Origens2"
fullWidth
/>
)}
/>
And to access the value: event.target.value