Hi,
I am using a menu similar to the one used here https://stackblitz.com/edit/react-raladh?file=app%2FDrawerContainer.jsx
However, I would like to hide and display the child items given a condition. Do you have any recommendation for achieveing that?
Best regards,
1 Answer, 1 is accepted
Hello,
This is already done conditionally in the demo using the visible custom prop:
const CustomItem = (props) => {
const { visible, ...others } = props;
const arrowDir = props['data-expanded']
? 'k-i-arrow-chevron-down'
: 'k-i-arrow-chevron-right';
return (
<React.Fragment>
{props.visible === false ? null : (
<DrawerItem {...others}>
<span className={'k-icon ' + props.icon} />
<span className={'k-item-text'}>{props.text}</span>
{props['data-expanded'] !== undefined && (
<span
className={'k-icon ' + arrowDir}
style={{
position: 'absolute',
right: 10,
}}
/>
)}
</DrawerItem>
)}
</React.Fragment>
);
};
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Thank you Stefan. However, as the way it is, you still have those elements (even though they are hidden). I would like to have them "available" given a condition, if the condition is not true, for example, the item should remain hidden and unavailable. Following the demo example, I would be able to see "Italian food" only if this was available.
Thank you for your assistance in this matter.
Hello,
In the example, the items that have visible false are not rendered in the DOM. Could you please clarify what you mean by `you still have those elements (even though they are hidden)`.
For example, I added a custom available property for Italian food and it is not in the DOM:
https://stackblitz.com/edit/react-raladh-jqathw?file=app%2FDrawerContainer.jsx
Rank 1
Iron
Hi Stefan,
Thanks! Now I can see the available property, however, I would like to find a way that this is set up inside a condition. As it is, I am not able to include a conditional statement inside React.useState.
Perhaps, you can give me an example where I can access the available property and change its value regarding a condition, so "Italian Food", for instance, is only available given a condition.
Best,
Hello,
To ensure that we can provide an example that covers this, please share an example with the current issue that needs to be addressed. Then based on that we will update it if possible to cover the requirement.
You can use the provided example as a starting point at tells us where the condition has to be added and what should happen based on that.
Rank 1
Iron
Hi Stefan,
Thank you for your assistance. I have the following questions:
- When the available property is added, the menu is always visible instead. Can we pass more than one condition, for instance, available and visible?
- In the example below, I created a condition given the "fetchItalianFood" response, however, I am afraid that in my case since I clone props inside the condition, the state is not updated. Do you have any suggestion?https://stackblitz.com/edit/react-raladh?file=app%2FDrawerContainer.jsx
Best,
If you need to make a request to determine whether or not a item should be displayed or not, you can initially hide it and if it should be displayed after the response, you can show it by using a state variable. Here is the modified example:
const CustomItem = (props) => {
const [fetchItalianFood, setFetchItalianFood] = React.useState(0);
React.useEffect(() => {
setFetchItalianFood(1); //this simulated async response
});