I am new to React.So i need to know how to hide or remove a component.
I have a Homepage where i have buttons like Logobutton and Menu button.I click on Menu button it loads a Menu component. I have done it by state. when i click on menu button I setState to true . It goes to Menu component. But when i click on Logo button It still shows the Menu component above the Home component. Logo button is from Header component.So i want to show Menu component only when clicking on menu button and hide or remove component when i move to some other page or click on any other button. How can i achieve it ?
You can conditionally render a component based on props:
<Component logged={value} />
//value will be the state value
if (logged) //state as prop {
return <UserGreeting />;
}
return <GuestGreeting />;
(from https://reactjs.org/docs/conditional-rendering.html)
or add style to a component and conditionally set the display property with ternary operator:
<Component logged={value} style={{display: logged ? 'block' : 'none'}}/>
Related
How do i close a react bootstrap popover component in a react functional component? currently i am using a hack that closes the popover using the rootclose method and calling body.click on the button inside, however i feel this is not ideal, is there any way or method in the react bootstrap component or maybe by using refs with which i can achieve this?
**************following is how my component is structured right now *****
const setVisibility = (
<Popover id="popover-basic">
<Popover.Body className="px-0">
//code here
</Popover.Body>
</Popover>
);
const EditVisibility = () => (
<OverlayTrigger
trigger="click"
placement="bottom-end"
overlay={setVisibility}
rootClose
>
//code here
</OverlayTrigger>
);
and then I'm calling the EditVisibility component in the return method of my react functional component
Please look into the folling sandbox: https://codesandbox.io/s/close-popover-ytpze2
Introduce a show state to make the Popover controlled.
In Popover.Header you can define a closer button and set the show state to false on click
Write a callback function which toggle the Popover on button click ("onToggle" property of OverlayTrigger)
i want to build a registration web page in react, that has a checkbox, and a text along that checkbox. one word in the text is a link to a pdf file which is the terms and conditions for example. now, how can i show that pdf not as a new window tab opened, but instead in the same tab and in a modal. i used the tag with a href attribute but it opened for me a new tab, and i dont know how to get that the modal will open in the page, with like a href link that when the user click on that link (not a button. link) the modal will show.
thanks
If you want to show modal to user, set one state modal, something like this:
const [modalConf, setModalConf] = useState({show:false, mode:''})
and user click the link, you can change the state, like:
setModalConf({show:true, mode:'Terms'})
and finally, you render the modal component like this :
<Modal show={modalConf.show} mode={modalConf.mode} />
and your modal component will get mode component from props:
Modal component:
props.mode === 'Terms' && render Terms
props.mode === 'Privacy' && render Privacy
So I created this button component using the following code
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large'];
const DISPLAY = ['btn--show', 'btn--hidden'];
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize,
buttonDisplay
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
const checkButtonDisplay = DISPLAY.includes(buttonDisplay)
? buttonDisplay
: DISPLAY[0];
return (
<Link to='/sign-up'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonDisplay}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
);
So I have this button component inside of my navbar component and I also have it inside of my home page section component.
My issue is that whenever I shrink the page to mobile, I want to make the button component in the navbar to display: none and then on the home section I want it to show
What ends up happening is that since it's a component, any CSS style I add to it will go on any other page that is using the component, so basically my button disappears on the home page section when I need it to display
I tried to add an Id to the button component, but that didn't work
<Button id='nav-btn' buttonStyle='btn--outline'>
SIGN UP
</Button>
and I don't know how I'd add a custom class or id to the navbar button without it applying to all the other button components on my homepage
Hide it with an expression, e.g., { showButton && <Button /> }. If showButton is true, you'll see the button, if not, you won't.
If you want to do it via CSS, use a media-query to set display: none on whatever screen size it's supposed to disappear on.
Edit in response to the comment
#media (max-height: 960px) {
display: none;
}
That reads, "If the height is less than 960px, set this property."
If you want a "special" button that hides on a screen size, create a higher-order component that wraps your button.
const NinjaButton => () => {
// do stuff
return <Button cssOverrideProp={cssWithMediaQueryThatHides} />
}
In Button, you can conditionally apply that css,
className=`{/* your other css */ ${cssOverrideProp || ''}}`
Then you can use that button anywhere it's supposed to hide.
I have an app using a material ui List with ListItems.
I want for users to be able to click on a ListItem and have it open a Modal or a Collapse to give more info about the ListItem. I want the view to stay the same (overall), albeit with a new url that links to that Modal or Collapse.
Right now, all I can get is that the user clicks on the ListItem and it opens an entirely new view.
I want to have the ListDetails or ListItem details be shown in a collapse or modal (or some ui that is on that same page) and be linkable (have a url)
Code:
// List
<List>
<Collapse>
<ListItem <Link to={`/listitem/${listitem.id}`}> />
<ListDetail />
</Collapse>
<ListItem />
<Modal><ListDetail /></Modal>
</List>
// Router
<Route path="/list/:id" render={({ match }) => <ListDetail params={match.params} />} />
This goes to an entirely new page. How to wire it up to so that I can show ListDetail within the same page?
How to set up the components/routing to change urls but just change the UI (and not render an entirely new page?
Do not put <Link to={'/listitem/${listitem.id}'}> there. Instead put an on-click handler with on-click function as this.props.router.push('/bar'). This will cause the route to change.
And when modal is false you can revert the url to previous url using the same method.
Is there a way I can adjust a <Popover> element when fullscreen (Element.requestFullscreen())?
By default its DOM is placed on the body root, and for so, it doesn't show when the element that triggered it to appear is fullscreen.
Because of this, all menus I have on my fullscreen element are never shown until it leaves fullscreen.
You have to customize container prop of the Popover
component. container is the node of DOM which is Popover mounted to. By default it is document.body. That is why Popover is mounted behind the element that is in full-screen mode.
You have to set container node to the element which is going to be in full-screen mode.
props container of the Popover component:
const containerRef = useRef(null);
<div ref={containerRef}>
<button onClick={handleOpen}>open</button>
<Popover container={containerRef.current}>
...
</Popover>
</div>