I have a problem with my application. The component ExpansionPanel of Material-ui is opening more than one Panel. I need to open just one.
father.js
<div>
{props.listContratos.map((item, index) => {
if (item.ativo) {
return (
<PartesCardCollapse
listPartes={props.listPartes}
item={item}
key={index}
thunks={props.thunks}
hideSnackbar={props.hideSnackbar}
/>
);
}
})}
</div>
son.js
export default function PartesCardCollapse(props) {
const classes = useStyles();
const [expanded, setExpanded] = React.useState(false);
const handleChange = (expanded, panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
return (
<div className={classes.root} onClick={getListPartes}>
<ExpansionPanel
expanded={expanded === props.item.id}
onChange={handleChange(expanded, props.item.id)}
>
Related
I have this layout component , I am trying to pass a prop from layout to its children.
const Layout = ({ children }: Props) => {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState(countries[0]);
console.log("The country idsz ...........",selected.id)
const country= selected.id
const modifiedChildren = React.Children.map(children, child => {
if (React.isValidElement(child)) {
//#ts-ignore
return React.cloneElement(child, { testProp : country });
}
return child;
});
return (
<>
<LayoutContent sidebar={open} countriesWithsrc ={countriesWithsrc} selected={selected} lected={setSelected} >
{modifiedChildren}
</LayoutContent>
</>
)
}
export default Layout;
How can I access the modifiedChildren in pages? An example is the following page.
const ComingSoonCarbon = () => {
return (
<Layout>
<div className="flex justify-center font-bold mt-80 text-xl text-[rgb(245,132,38,0.93)]">
<h1>Development ongoing.Coming soon #2022</h1>
</div>
</Layout>
)
}
export default ComingSoonCarbon
I tried to toggle individual item but unfortunately whenever I try to toggle an item the other item gets affected. Here is my code:
const FAQ = () => {
const [open, setOpen] = useState(false);
const [data, setData] = useState(faqData);
return (
<FAQSection>
<FAQTitle>Frequently Asked Questions</FAQTitle>
<Questions>
<QuestionItemDetail>
{data.map((item) => {
const { id, question, answer } = item;
return (
<div key={id}>
<QuestionItem onClick={() => setOpen(!open)}>
<QuestionItemTitle>{question}</QuestionItemTitle>
{open ? <Close /> : <Add />}
</QuestionItem>
<ReadQuestion>
{open && (
<ReadQuestionDetail>
<ReadQuestionDesc>{answer}</ReadQuestionDesc>
</ReadQuestionDetail>
)}
</ReadQuestion>
</div>
);
})}
</QuestionItemDetail>
</Questions>
</FAQSection>
);
};
What might be wrong with this because I ensured the dummy data has a unique ID.
Because you use a boolean to control all open/close. You need to use index/id to control this.
const [open, setOpen] = useState(null);
...
onClick={() => setOpen(preOpen => preOpen === id ? null : id)}
...
{open === id && (<ReadQuestionDetail>...</ReadQuestionDetail>)}
Your open state is used for all of the items in your data array, which is why it affects all of the items when toggled.
I recommend:
putting all of the data item html/jsx inside a new component.
Inside this new component, create an open state like so:
const MyItemComponent = (id, question, answer) => {
const [open, setOpen] = useState(false);
return (
<div key={id}>
<QuestionItem onClick={() => setOpen(!open)}>
<QuestionItemTitle>{question}</QuestionItemTitle>
{open ? <Close /> : <Add />}
</QuestionItem>
<ReadQuestion>
{open && (
<ReadQuestionDetail>
<ReadQuestionDesc>{answer}</ReadQuestionDesc>
</ReadQuestionDetail>
)}
</ReadQuestion>
</div>
);
}
const FAQ = () => {
const [data, setData] = useState(faqData);
return (
<FAQSection>
<FAQTitle>Frequently Asked Questions</FAQTitle>
<Questions>
<QuestionItemDetail>
{data.map((item) => {
const { id, question, answer } = item;
return (
<MyItemComponent id={id} question={question} answer={answer} />
);
})}
</QuestionItemDetail>
</Questions>
</FAQSection>
);
};
This will give you an individual open state for each item.
So basically I have 2 pieces, the sidebar, then the opener. I'm trying to setup a ref that will connect the sidebar to the current opener. The opener is a functional component, and no matter what I do the current value is null. Am I missing something? I'm just trying to resize a component. My goal is to be able to resize the shown sidebar with the opener.
Here's part of the Render function.
render() {
const { selected, isSidebar, selectedType, search, active } = this.state;
const { pending, callback, resource } = this.props;
const pendingLengh = pending ? pending.length : 0;
const callbackLength = callback ? callback.length : 0;
const isResource = !resource || !Object.keys(resource).length;
return (
<div className="newPatientPage mainPage">
{this.renderMetadata()}
<SubTopBar
title="New Patient Processing"
noLeftSide={true}
subStatus={this.getStatus(pendingLengh, callbackLength)}
isBarcode={!isResource}
sideComponent={this.renderSideComponent()}
/>
{
active ?
<SnapshotSideBar
ref={this.sidebarRef}
patientResource={this.props.patientResource}
isShow={isSidebar}
settup={this.state.settup}
isScan={true}
handleCloseSidebar={this.handleCloseSidebar}
/> :
<NewPatientSideBar
ref={this.sidebarRef}
stepProps={this.state.stepProps}
selected={selected}
isShow={isSidebar}
handleCloseSidebar={this.handleCloseSidebar}
/>
}
<SidebarExtension sidebarToggle={this.toggleSidebar} sidebarReference={this.sidebarRef} sidebarState={isSidebar}/>
Here's the SidebarExtension component
const SidebarExtension = ({
sidebarToggle,
sidebarReference,
sidebarState,
...restProps
}) => {
const [xPos, setXPos] = useState(0);
const [width, setWidth] = useState();
const [openerPosition, setOpenerPosition] = useState(50);
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => {
sidebarToggle();
setIsOpen(!isOpen);
};
useEffect(() => {
setIsOpen(sidebarState);
}, [sidebarState])
if ((!isOpen && !sidebarState)) {
return (
<>
<div
className="resizeHandle"
style={{
right: "0Px",
}}
onClick={toggleSidebar}
>
<LeftCharvenSVG />
</div>
</>
);
}
return (
<>
<div
className="resizeHandle active"
onClick={toggleSidebar}
onMouseDown={startResize}
>
<LeftCharvenSVG />
</div>
</>
);
};
export default SidebarExtension;
Here's what the constructor looks like.
Main Constructor
From the docs https://reactjs.org/docs/forwarding-refs.html you need to wrap your functional component in React.forwardRef()
Example
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
In your case that would be:
const SidebarExtension = React.forwardRef(({
sidebarToggle,
sidebarReference,
sidebarState,
...restProps
}, ref) => {
const [xPos, setXPos] = useState(0);
const [width, setWidth] = useState();
const [openerPosition, setOpenerPosition] = useState(50);
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => {
sidebarToggle();
setIsOpen(!isOpen);
};
useEffect(() => {
setIsOpen(sidebarState);
}, [sidebarState])
if ((!isOpen && !sidebarState)) {
return (
<>
<div
className="resizeHandle"
style={{
right: "0Px",
}}
ref={ref}
onClick={toggleSidebar}
>
<LeftCharvenSVG />
</div>
</>
);
}
return (
<>
<div
className="resizeHandle active"
onClick={toggleSidebar}
onMouseDown={startResize}
>
<LeftCharvenSVG />
</div>
</>
);
});
export default SidebarExtension;
I have a Material UI menu component with custom MenuItems. Now when the menu and a submenu is opened I would like to be able to close the whole menu when clicking outside of the menu. I still need to do two clicks, first closing the submenu and then the actual menu.
The documentation MUI menu refers to using the anchorEl as the boolean to determine if menu is open but even i send the close callback function from the custom menu items it only closes itself with the handleClose() when clicking outside the component. So in the picture attached only the Container containing Corporate finance is closed and not also the menu.
Can't understand, as the anchorEl is turning to null in the closeFunction the core menu still stays open. Tried with menu and MenuItems and Popover that are built on the Modal component.
MenuComponent:
const MoreMenu = ({
userTagData,
onChangeItemName,
selectedTags,
onTagSelected,
onRemoveItem,
data,
item,
}) => {
const [anchorEl, setAnchorEl] = useState(null);
const [subMenuPopUpName, setSubMenuPopUpName] = useState('');
const renderChangeTitlePopUp = () => (
<ChangeTitleContainer
onChangeItemName={onChangeItemName}
closeMenuItem={handleClose}
item={item}
/>
);
const renderAddTagPopUp = () => (
<AddTagContainer
item={item}
userTagData={userTagData}
selectedTags={selectedTags}
onTagSelected={onTagSelected}
/>
);
const renderRemoveItemContainer = () => (
<RemoveItemContainer
item={item}
onRemoveItem={onRemoveItem}
closeMenuItem={handeleClose}
/>
);
const renderDefaultPopup = () => (
<div><p>Standard menu post</p></div>
);
const menuItemPopUpSwitcher = (name) => {
switch (name) {
case ADDTAG:
return renderAddTagPopUp();
case CHANGETITLE:
return renderChangeTitlePopUp();
case REMOVEITEM:
return renderRemoveItemContainer();
default:
return renderDefaultPopup();
}
};
const handleMenuItemClick = (item, event) => {
setAnchorEl(event.currentTarget);
setSubMenuPopUpName(item.title);
setAnchorEl(event.currentTarget);
menuItemPopUpSwitcher(item);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Fragment>
<MoreButton
data={data}
handleMenuItemClick={handleMenuItemClick}
/>
<Menu
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
{menuItemPopUpSwitcher(subMenuPopUpName)}
</Menu>
</Fragment>
);
};custom
Was able to solve problem by adding another state for the parent anchor. So the parent menu has its own anchor and the child popup its own anchor and then handleClose() disables them both. See example and 5 lines marked with //THIS IS NEW:
const MoreMenu = ({
userTagData,
onChangeItemName,
selectedTags,
onTagSelected,
onRemoveItem,
data,
item,
}) => {
const [parentAnchorEl, setParentAnchorEl] = useState(null); // THIS IS NEW
const [anchorEl, setAnchorEl] = useState(null);
const [subMenuPopUpName, setSubMenuPopUpName] = useState('');
const handleMoreButtonClick = (event) => { // THIS IS NEW
setParentAnchorEl(event.currentTarget);
};
const renderChangeTitlePopUp = () => (
<ChangeTitleContainer
onChangeItemName={onChangeItemName}
closeMenuItem={handleClose}
item={item}
/>
);
const renderAddTagPopUp = () => (
<AddTagContainer
item={item}
userTagData={userTagData}
selectedTags={selectedTags}
onTagSelected={onTagSelected}
/>
);
const renderRemoveItemContainer = () => (
<RemoveItemContainer
item={item}
onRemoveItem={onRemoveItem}
closeMenuItem={handeleClose}
/>
);
const renderDefaultPopup = () => (
<div><p>Standard menu post</p></div>
);
const menuItemPopUpSwitcher = (name) => {
switch (name) {
case ADDTAG:
return renderAddTagPopUp();
case CHANGETITLE:
return renderChangeTitlePopUp();
case REMOVEITEM:
return renderRemoveItemContainer();
default:
return renderDefaultPopup();
}
};
const handleMenuItemClick = (item, event) => {
setAnchorEl(event.currentTarget);
setSubMenuPopUpName(item.title);
setAnchorEl(event.currentTarget);
menuItemPopUpSwitcher(item);
};
const handleClose = () => {
setAnchorEl(null);
setParentAnchorEl(null); //THIS IS NEW
};
return (
<Fragment>
<MoreButton
anchorEl={parentAnchorEl} //THIS IS NEW
data={data}
handleMenuItemClick={handleMenuItemClick}
handleClick={handleMoreButtonClick} //THIS IS NEW
/>
<Menu
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
{menuItemPopUpSwitcher(subMenuPopUpName)}
</Menu>
</Fragment>
);
};
const MoreButton = ({
data,
handleMenuItemClick,
anchorEl,
handleClick,
handleClose,
}) => (
<div>
<MoreIconMUI onClick={handleClick} />
<Menu
id="menu-appbar"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
>
{data.map(item => (
<MenuItem
key={item.title}
onClick={event => handleMenuItemClick(item, event)}
>
{item.title}
</MenuItem>
))}
</Menu>
</div>
);
const ListView = () => {
return(
<ul>
<ListItem modal={<Modal />} />
</ul>
)
};
const ListItem = (props) => {
const [visible, setVisible] = useState(false);
const toggle = () => setVisible(!visible)
return (
<>
<li>
ListItem
</li>
<ModalWrapper toggle={toggle}>{props.modal}</ModalWrapper>
</>
)
}
const ModalWrapper = (props) => {
if(!props.visible) return null;
return (
<>
{props.children}
</>
)
}
const Modal = ({ toggle }) => {
/* I would like to use toggle() here. */
return (
<>
<div onClick={toggle} className="dimmer"></div>
<div className="modal">modal</div>
</>
)
}
I have a function toggle() in <ListItem /> as shown above.
I am struggling to use toggle() in <Modal />.
Is it possible or are there any suggestions?
You need to inject toggle to ModalWrapper children, be careful not to override toggle prop on Modal after it.
const ModalWrapper = ({ children, visible, toggle }) => {
const injected = React.Children.map(children, child =>
React.cloneElement(child, { toggle })
);
return <>{visible && injected}</>;
};
Refer to React.cloneElement and React.Children.map.
Demo: