My modal causes a crash whenever I close it. The modal contains picture details and is displaying them.
The error message I am getting is:
"TypeError: Cannot read properties of undefined (reading 'name')"
Although the above prop worked fine while the modal was open. A thing I noted is that whenever the modal contains only the below paragraph with the id, it works fine and closes without any issues.
<p>{modalContent.id}</p>
Where the FavoritesModal gets its props
const FavoritesSidebar = () => {
const [modalOpen, setModalOpen] = useState(false)
const [modalContent, setModalContent] = useState(null)
const favoriteList = useSelector((state) => state.favoriteList)
const toggleModal = (arg) => {
setModalOpen(!modalOpen)
setModalContent(arg)
}
return (
<Container className="favorites-sidebar">
{/* {modalContent ? <p>yes</p> : <p>no</p>} */}
{favoriteList.length > 0 ? <h4>Your favorited pictures</h4> : null}
{favoriteList.length > 0 &&
favoriteList.map((item) => (
<Row key={item.id} className="favorite-item">
<Col onClick={() => toggleModal(item)}>
</Col>
</Row>
))}
{modalContent ? (
<FavoritesModal
modalOpen={modalOpen}
modalContent={modalContent}
toggleModal={toggleModal}
/>
) : null}
</Container>
)
}
export default FavoritesSidebar
FavoritesModal
const FavoritesModal = (props) => {
const { modalOpen, modalContent, toggleModal } = props
const dispatch = useDispatch()
if (modalContent)
return (
<Modal
isOpen={modalOpen}
toggle={toggleModal}
centered
fullscreen=""
size="xl"
>
<ModalHeader>
<p>
{modalContent.description !== null
? `${modalContent.description} by ${modalContent.user.name}`
: `Taken by: ${modalContent.user.name}`}
</p>
<p>{modalContent.id}</p>
</ModalHeader>
<ModalBody>
<img src={modalContent.urls.regular} alt={modalContent.description} />
</ModalBody>
<ModalFooter>
<Button
color="danger"
onClick={() => dispatch(removeFromFavorites(modalContent.id))}
>
Remove from favorites
</Button>
</ModalFooter>
</Modal>
)
else return null
}
export default FavoritesModal
Rewriting the toggleModal functioned solved the issue
const toggleModal = (arg) => {
if (modalOpen) {
setModalOpen(!modalOpen)
setModalContent(null)
} else {
setModalOpen(!modalOpen)
setModalContent(arg)
}
}
Related
I'm trying to pass a class only to the checked radio button in my component, but with my existing code all the radio buttons receive the class. Any advice?
export default function RadioGroup({options}){
const [isChecked, setIsChecked] = useState(false);
return(
<>
{options.map(option => {
return (
<Radio
radioID={option.id}
radioName={name}
radioLabel={option.label}
radioClass={` ${isChecked ? "bg-blue" : ""}`}
onChange={() => setIsChecked((prev) => !prev)}
/>
)
})}
</>
);
}
Instead of passing Boolean in setIsChecked, you have to pass the id then you can add the bg-blue class on id base, as you can see the below code.
export default function RadioGroup({options}){
const [isChecked, setIsChecked] = useState(null);
return(
<>
{options.map(option => {
return (
<Radio
radioID={option.id}
radioName={name}
radioLabel={option.label}
radioClass={` ${(isChecked === option.id) ? "bg-blue" : ""}`}
onChange={() => setIsChecked(option.id)}
/>
)
})}
</>
);
}
I have this Little list that should show different modals based on what the user select , and the problem is When I select the first time it doesn't work and I have to click on it again to work .
Here is my code :
const Mylist = props => {
const [open2, setOpen2] = React.useState(false);
const [open3, setOpen3] = React.useState(false);
const handleClose2 = () => {
setOpen2(false);
};
const handleOpen2 = () => {
setOpen2(true);
};
const handleClose3 = () => {
setOpen3(false);
};
const handleOpen3 = () => {
setOpen3(true);
};
const [isActive , SetIsActive] = useState(false);
const option =["Paid" , "UnPaid"]
return (
<div>
<i class="fas fa-ellipsis-v" onClick={(e) => SetIsActive(!isActive)}></i>
{isActive && (
<div>
{option.map((option) => (
<div
onClick={(e) => {
SetIsActive(false);
{option == 'Paid' && setOpen2(true)}
{option == 'UnPaid' && setOpen3(true)}
}}
>
{option}
</div>
))}
<Modal onClose={handleClose2} open={open2} >
<div>
Content
</div>
</Modal>
<Modal onClose={handleClose3} open={open3} >
<div>
Content
</div>
</Modal>
Your code block is a bit messy with some brackets and closing tags missing (possibly some of the code was not copied in by mistake?).
In any case, I did my best at trying to fill in the missing parts and did some refactoring to your code. I hope that fixes your bug!
import React, { useState } from 'react';
const MyList = (props) => {
const [isOpen1, setIsOpen1] = useState(false);
const [isOpen2, setIsOpen2] = useState(false);
const [isActive, setIsActive] = useState(false);
const openOption = (option) => {
setIsActive(false);
if (option === "Paid") {
setIsOpen1(true);
}
if (option === "UnPaid") {
setIsOpen2(true);
}
};
const options =["Paid", "UnPaid"]
return (
<div>
<i class="fas fa-ellipsis-v" onClick={() => setIsActive(!isActive)}></i>
{isActive && (
<div>
{options.map((option) => (
<div onClick={() => openOption(option)}>
{option}
</div>
))}
</div>
)}
<Modal onClose={() => setIsOpen1(false)} open={isOpen1} >
<div>
Content
</div>
</Modal>
<Modal onClose={() => setIsOpen2(false)} open={isOpen2} >
<div>
Content
</div>
</Modal>
</div>
);
};
I am still new to React and I have so much trouble finding out where is the problem, I know it must be something with function call, also tried to debug but didn't work, don't know any other way(tools) how to find out where is the problem.
App.tsx
const App = () => {
const [tasks, setTasks] = useState<string[]>(["Task1", "Task2"]);
const addTask = (task : string) => {
setTasks([...tasks, task]);
}
return (
<div>
<SubmissionBox tasks={tasks} addTask={addTask}/>
<Tasks tasks={tasks}/>
</div>
);
}
export default App;
SubmissionBox.tsx
interface ISubmissionProps {
tasks : string[];
addTask : (task : string) => void;
}
const SubmissionBox = (props : ISubmissionProps) => {
const [task, setTask] = useState("");
const onTaskChange = (e : any) : void => {
setTask(e.target.value);
}
return (
<>
<InputGroup>
<Input placeholder="Add new task..." value={task} onChange={onTaskChange}/>
<Button color="success" type="submit" onSubmit={() => props.addTask(task)}>Submit</Button>
</InputGroup>
</>
);
}
export default SubmissionBox;
Tasks.tsx
const Tasks = ({tasks} : {tasks:string[]}) => {
return (
<>
<ListGroup>
{tasks.map((item: any, i: any) => (
<ListGroupItem className="d-flex justify-content-between" key={i}>{item}<Button color="danger">Remove</Button></ListGroupItem>
))}
</ListGroup>
</>
);
};
export default Tasks;
On button you need to change prop onSubmit to onClick
<Button color="success" type="button" onClick={() => props.addTask(task)}>Submit</Button>
Typical material-ui stepper below.
export default function HorizontalLinearStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set());
const steps = getSteps();
const isStepOptional = step => {
return step === 1;
};
const isStepSkipped = step => {
return skipped.has(step);
};
const handleNext = () => {
let newSkipped = skipped;
if (isStepSkipped(activeStep)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStep);
}
setActiveStep(prevActiveStep => prevActiveStep + 1);
setSkipped(newSkipped);
};
const handleBack = () => {
setActiveStep(prevActiveStep => prevActiveStep - 1);
};
const handleSkip = () => {
if (!isStepOptional(activeStep)) {
// You probably want to guard against something like this,
// it should never occur unless someone's actively trying to break something.
throw new Error("You can't skip a step that isn't optional.");
}
setActiveStep(prevActiveStep => prevActiveStep + 1);
setSkipped(prevSkipped => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStep);
return newSkipped;
});
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className={classes.root}>
<Stepper activeStep={activeStep}>
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (isStepOptional(index)) {
labelProps.optional = <Typography variant="caption">Optional</Typography>;
}
if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step key={label} {...stepProps}>
<StepLabel {...labelProps}>{label}</StepLabel>
</Step>
);
})}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you're finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<div className={classes.instructions}>{getStepContent(activeStep)}</div>
<div>
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
Back
</Button>
{isStepOptional(activeStep) && (
<Button
variant="contained"
color="primary"
onClick={handleSkip}
className={classes.button}
>
Skip
</Button>
)}
<Button
variant="contained"
color="primary"
onClick={handleNext}
type="submit"
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
Here is function i create to choice step
function getStepContent(step) {
switch (step) {
case 0:
return <Step1/>;
case 1:
return <Step2/>;
case 2:
return 'This is the bit I really care about!';
default:
return 'Unknown step';
}
}
Step1 and Step2 are components that has 2 forms inside build with react-final-form
import React, { Component } from 'react';
import { Form } from 'react-final-form';
import initialValuesCreator from './creationMethods/initialValuesCreator';
import { validationCreator } from './creationMethods/validationSchemaCreator';
class CustomValidationForm extends Component {
render() {
const {
config ,children, submit = () => {}
} = this.props;
return (
<Form
onSubmit={(event) => {
submit(event);
}}
initialValues={initialValuesCreator(config)}
validate={values => validationCreator(values, config)}
render={({handleSubmit}) => (
<form noValidate autoComplete={'off'} onSubmit={handleSubmit}>
{children}
</form>
)}
/>
)
}
}
And here comes the question. Material ui stepper has handleNext function. Its my submit for each step. Each step will be some kind of form with validation. When user is on step1 and he press submit i want to show him input errors (something is required etc) and prevent jumping to next step. Step1 can have multiple small forms so all the form should be validated when handleNext is pressed.
I was dealing with it as well
What I finally did to resolve it:
Wrapping the pages with a form (instead of the div)
Setting a reference to the form using the 'useRef' react hook
Check whether or not the form is valid on the 'handleNext' method and return if it's not. The access to the form object is achieved by the useRef hook, and the validity check made by the function 'myForm.current.checkValidity()'
Please give it a shot and let me know if it works for you:
export default function HorizontalLinearStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set());
const steps = getSteps();
const myForm = React.useRef(null);
const isStepOptional = step => {
return step === 1;
};
const isStepSkipped = step => {
return skipped.has(step);
};
const handleNext = () => {
if (!myForm.current.checkValidity()) {
return;
}
let newSkipped = skipped;
if (isStepSkipped(activeStep)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStep);
}
setActiveStep(prevActiveStep => prevActiveStep + 1);
setSkipped(newSkipped);
};
const handleBack = () => {
setActiveStep(prevActiveStep => prevActiveStep - 1);
};
const handleSkip = () => {
if (!isStepOptional(activeStep)) {
// You probably want to guard against something like this,
// it should never occur unless someone's actively trying to break something.
throw new Error("You can't skip a step that isn't optional.");
}
setActiveStep(prevActiveStep => prevActiveStep + 1);
setSkipped(prevSkipped => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStep);
return newSkipped;
});
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className={classes.root}>
<Stepper activeStep={activeStep}>
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (isStepOptional(index)) {
labelProps.optional = <Typography variant="caption">Optional</Typography>;
}
if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step key={label} {...stepProps}>
<StepLabel {...labelProps}>{label}</StepLabel>
</Step>
);
})}
</Stepper>
<form action="/" method="POST" ref={myForm}>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you're finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<div className={classes.instructions}>{getStepContent(activeStep)}</div>
<div>
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
Back
</Button>
{isStepOptional(activeStep) && (
<Button
variant="contained"
color="primary"
onClick={handleSkip}
className={classes.button}
>
Skip
</Button>
)}
<Button
variant="contained"
color="primary"
onClick={handleNext}
type="submit"
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</form>
)}
</div>
</div>
);
}
The best way I've come up with to do step-wise validation is by breaking the form up into little forms and have a controller component combine all the form values together like in the Wizard Form Example.
I have a nav menu built with material-ui/core in Navbar.
I use useRef to track the position of clicked button on toggle menu close.
anchorRef.current.contains(event.target)
And I am getting 'Uncaught TypeError: anchorRef.current.contains is not a function' .
I tried 'Object.values(anchorRef.current).includes(event.target)' instead, it always returns false.
-- update --
anchorRef.current.props Object.
withStyles {
props:{
aria-haspopup: "true"
aria-owns: undefined
children: "계정"
className: "nav-menu--btn"
onClic: f onClick()
get ref: f()
isReactWarning: true
arguments: (...)
caller: (...)
length: 0
name: "warnAboutAccessingRef"
...
}, context{...}, refs{...}, ...}
ToggleMenuList
const ToggleMenuList = ({ navAdminList, navAdminItems, classes }) => {
const [activeId, setActiveId] = useState(null);
const anchorRef = useRef(null);
const handleToggle = id => {
setActiveId(id);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setActiveId(null);
};
return (
<React.Fragment>
<div className={`nav-menu--admin ${classes.root}`}>
{navAdminList.map(e => (
<div key={e.id}>
<Button
ref={anchorRef}
aria-owns={activeId === e.id ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={() => handleToggle(e.id)}
>
{e.name}
</Button>
{activeId === e.id && (
<ToggleMenuItems
id={e.id}
activeId={activeId}
handleClose={handleClose}
anchorRef={anchorRef}
items={navAdminItems[e.id]}
/>
)}
</div>
))}
</div>
</React.Fragment>
);
};
export default withStyles(styles)(ToggleMenuList);
ToggleMenuItems
const ToggleMenuItems = ({
listId,
activeId,
handleClose,
anchorRef,
items,
}) => {
const isOpen = activeId === listId;
const leftSideMenu = activeId === 3 || activeId === 4 ? 'leftSideMenu' : '';
return (
<Popper
open={isOpen}
anchorEl={anchorRef.current}
keepMounted
transition
disablePortal
>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement === 'bottom' ? 'center top' : 'center bottom',
}}
className={`toggle-menu ${leftSideMenu}`}
>
<Paper id="menu-list-grow">
<ClickAwayListener
onClickAway={handleClose}
>
<MenuList className="toggle-menu--list">
{items.map(e => (
<MenuItem
key={e.id}
className="toggle-menu--item"
onClick={handleClose}
>
<Link
to={e.to}
className="anchor td-none c-text1 toggle-menu--link"
>
{e.name}
</Link>
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
);
};
export default ToggleMenuItems;
react: ^16.8.6
react-dom: ^16.8.6
react-router-dom: ^4.3.1
#material-ui/core: ^3.1.2
I assume your ToggleMenuItems sets up global(document-level?) event listener on click to collapse Menu on clicking somewhere outside.
And you have a sibling button element. Clicking on that you want to keep menu expanded, right? So that was the point to use .contains in onClick to check if we are clicked outside of ToggleMenuItems but in scope of specific Button. The reason why it does not work: <Button> is custom class-based React component so it returns React component instance in ref. And it does not have any DOM-specific methods like .contains
You can rework you current approach: just stop bubbling event in case Button has been clicked. It would stop global event handler set by ToggleMenuItems to react.
const stopPropagation = (event) => event.stopPropagation();
const ToggleMenuList = ({ navAdminList, navAdminItems, classes }) => {
const [activeId, setActiveId] = useState(null);
const anchorRef = useRef(null);
const handleToggle = id => {
setActiveId(id);
};
const handleClose = event => {
setActiveId(null);
};
return (
<React.Fragment>
<div className={`nav-menu--admin ${classes.root}`}>
{navAdminList.map(e => (
<div key={e.id}>
<div onClick={stopPropagation}>
<Button
aria-owns={activeId === e.id ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={() => handleToggle(e.id)}
>
{e.name}
</Button>
</div>
{activeId === e.id && (
<ToggleMenuItems
id={e.id}
activeId={activeId}
handleClose={handleClose}
anchorRef={anchorRef}
items={navAdminItems[e.id]}
/>
)}
</div>
))}
</div>
</React.Fragment>
);
};
export default withStyles(styles)(ToggleMenuList);
I've put stopPropagation handler outside since it does not depend on any internal variable.