How to hide header component conditionally wise see in my codesandbox
I do not want schedule tab to display header how this possible
Please guide thanks
https://codesandbox.io/s/vvoqvk78
You could wrap your app with withRouter and access the current location from the location prop. This enables you to render the header conditionally:
const App = props => (
<div>
{props.location.pathname !== "/schedule" && <Header />}
<Main />
</div>
);
export default withRouter(App);
Here is a codepen.
Hope this helps. Happy coding.
Related
Does anybody know a way program or technique to change the title of any page based on the first founded tag? f.e.
For the most part, they resemble each other so it might be useful to implement it as default parameter, at least
For nextjs it's pretty simple to use Next-Seo,.This will render out the tags in the for SEO. At a bare minimum, you should add a title and description.
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="Simple Usage Example"
description="A short description goes here."
/>
<p>Simple Usage</p>
</>
);
export default Page;
Use react-helmet. You can set the title same as the content of your first div.
import Helmet from "react-helmet";
export default function App() {
return (
<div className="App">
<Helmet>
<title>this is the title</title> // this can be a prop or a state data
</Helmet>
</div>
);
}
DEMO
PREVIEW
I am running into a simple issue that doesn't seem to have an answer on quick google search or Tailwind doc.
I am a Vuejs user but I have started learning React. I have opted to use TailwindCSS for testing my React application but I noticed there is some differences of Tailwind usage between Vuejs and React.
In Vue, I can control a child component via the parent component like so:
Parent component:
<template>
<div class="w-screen">
<ChildComponent class="w-1/2 mx-auto" />
</div>
</template>
With the child being able to centre on screen through the above parent component as should in the ChildComponent's class.
However, when I tried to do the same in React like so:
Parent component:
import Homepage from './views/Homepage';
function App() {
return (
<div className='bg-black w-screen'>
<Homepage className="w-1/2 mx-auto"/>
</div>
);
}
export default App;
Nothin happens when I placed the CSS at the Homepage child component from the parent.
I am sure there is a simple answer but I wasn't about to search the doc or use any keywords to find this problem. Anyone got a hint or confirm this is intended in React or have I done something wrong with the installation?
This is less of a Tailwind question and more of a React question. You cannot use className on the Homepage component without passing it as a prop. In your case, Homepage is not expecting any className. So while making your Homepage component you have to provide a prop called 'className' then it will work fine.
Or if you simply use a div in place of Homepage it will work normally. Have a look at this codesandbox link
You need to consider that <Homepage/> is a React component and cannot accept HTMLAttrs just like that.
this example might clear it:
const app = () => {
<div className="bg-black">
<Homepage className="bg-red" />
</div>
}
const homePage = (props) => {
<div className={props.className}>
<h1 className="bg-red">hi</h1>
</div>
}
the className that you pass to <Homepage/> is actually a props rather than Html attribure.
In Vue it's fairly straightforward but in react you need to be explicit and use className in your component
// Creating component
const Button = ({ className, children }) => {
return <button className={`${className} bg-red-500`}>{children}</button>
}
export default Button
// Using component
<Button className="text-white">MyButton</Button>
import Homepage from './views/Homepage';
function App() {
return (
<div className='bg-black w-screen'>
<Homepage className="w-1/2 mx-auto"/>
</div>
);
}
export default App;
views/Homepage
you have to receive props that are going to be passed as className
const homePage = ({className}) => {
<div className={className}>
<h1 className="bg-red">hi</h1>
</div>
}
export default homePage
then export your component
I am building a gallery where you click on the image and it will load in a separate component using props, this image is a URL, taken from an array, where the src property is loaded as a background image via CSS. My challenge is connecting the src data to the child component. See original question
I have found a solution to pass the data using the Link component. Now the URL string is being read like this: http://localhost:3000/https://photos.smugmug.com/photos....
As you can see there is an address within the address in the string.
I have tried changing the state of the URL string but did not work.
My question, how do I write a redirect to fix the HTTP address removing the localhost address
UPDATE
Many thanks to Taylor, Drew, and Ajeet for all of your help!
The solution is posted below, the main issue was I needed a function in the Image component to connect the src props from the GalleryContainer component.
I also changed all "a tags" to "Link components" to keep consistency. More details are in the explained solutions from Drew and Taylor, and also Ajeet code box here
Issues
I don't know why but you don't seem to use Link components consistently in your app; when using anchor (<a>) tags these types of links will reload the page and your app. A similar issue occurs when you manually set the window.location.href.
The Image wasn't correctly accessing the passed route state.
Solution
App
Reorder your routes from more specific to least specific, and remove the link from within the Switch component, only Route and Redirect components are valid children.
function App(props) {
return (
<>
<Router>
<Switch>
<Route path="/gallery" component={GalleryList} />
<Route path="/image" component={Image} />
<Route path="/" component={Home} />
</Switch>
</Router>
</>
);
}
Home
Use Link component to enter the gallery.
import { Link } from "react-router-dom";
...
<Link to="/gallery">
<h4>Click Here to Enter Gallery!</h4>
</Link>
GallerayList
Use Link component for the link back home.
import { Link } from "react-router-dom";
...
<Link to="/">Home</Link>
GalleryContainer
Refer to image source consistently, i.e. src. Pass along also the image id in route state, using a Link.
const GalleryConatiner = (props) => {
return (
// generates the gallery list!
<ul>
<li className={styles["gallery-list"]}>
<Link
to={{ pathname: "/image", state: { id: props.id, src: props.src } }}
>
<div
className={styles["div-gallery"]}
style={{
backgroundImage: `url(${props.src})`,
height: 250,
backgroundSize: "cover"
}}
></div>
</Link>
</li>
</ul>
);
};
src/Public/Image
Use a Link for the link back to the gallery. Use the useLocation hook to access the passed route state.
import { Link, useLocation } from 'react-router-dom';
const Image = (props) => {
const { state: { id, src } = {} } = useLocation();
return (
<section>
<h1 className={styles["h1-wrapper"]}>Image :{id}</h1>
<div className={styles.wrapper}>
<Link to="/gallery">BACK TO GALLERY</Link>
<ImageContainer id={id} key={id} src={src} />
</div>
</section>
);
};
src/Public/ImageContainer
It isn't clear what your plan is for this component and clicking on the div rendering the passed image as a background so just remove the window.location.href logic with history.push if you want to navigate elsewhere. You can access the history object via the useHistory React hook.
Demo
The disconnect is between the GalleryContainer and Image components. In order to access data from the <Link to=...> within the next component, you need to use props.location.propertyName.
So for example, your GalleryContainer needs to link like this:
<Link to={{ pathname: "/image", src: props.src }}>
And then the value can be retrieved inside the Image component like so:
<ImageContainer id={props.id} key={props.id} src={props.location.src} />
You can use
<Link to={{ pathname: "/image", state: { url: props.src } }}>
but then you would have to access it in the linked component like this: props.location.state.url
From there, you can use an <a> tag with an href to link to the src property.
You can simply use a tag to redirect.
<a target='_blank' href={}>
Link
</a>
Remove target attribute if you dont need to open in new tab.
noob question but I wanted to ask if I am creating a react app that has a front-end and back-end interface. How would I add a navbar for each of them. I am thinking of creating a private route for the backend interface and then adding my navbar there, But navbar on App.JS would clash with that. Am I right to think that, if so how can I fix it?
Here is an example:
function Users() {
let location = useLocation();
return (
<div>
<div>
{location.pathname === "/backend-navbar"?
<p>back-end navbar</p> : <p>front-end navar</p>}
</div>
</div>
);
}
A simple example for explaining my question:
ButtonComponent is a component mounted on <div id="btn-container"> element
ModalComponent is a component mounted on <div id="modal-container"> element
So two components mounted on different elements in different places in the page, not sharing a common React element.
ModalComponent receive a prop named isOpen to trigger its visibility:
<ModalComponent isOpened={isOpened} />
The ButtonComponent should, in some way, pass the prop isOpen to the ModalComponent without sharing the same "root" component. Is this even possible?
Of course the "normal way" to do this would be a ButtonPlusModalComponent like the following:
export const ButtonPlusModalComponent = () => {
const [isOpened, setIsOpened] = useState(false);
return (
<>
<ButtonComponent onClick={() => setIsOpened(true)} />
<ModalComponent isOpened={isOpened} />
</>
);
};
I'm using React with a regular PHP application, so... not a complete "full" React application, only some parts and portions of the page are React components, no router at all.
So, I have that button somewhere in the page. That button should open the modal component, which is a... React component placed elsewhere in the page.
EDIT: explain why the question.
You must both component to share a common parent, thats how React works as Data Flows Down.
If you can, couple them into the same tree and use common solutions like Context API.
But, you describing a situation where the components are decoupled, so in order to have a common parent and mount a component into another HTML element, you need to use React.Portal.
Therefore you need one component to mount the other using Portals:
<body>
<div id="modal-container"></div>
<div id="btn-container"></div>
</body>
const Modal = ({ open }) => open && <>Modal</>;
const App = () => {
const [open, toggleOpen] = useReducer((p) => !p, true);
return (
<>
<button onClick={toggleOpen}>toggle</button>
{ReactDOM.createPortal(
<Modal open={open} />,
document.getElementById("btn-container")
)}
</>
);
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("modal-container")
);