I'm having trouble with a project where I need to navigate to a certain section of a page when a navigation item is clicked.
I am using the Navlink component as follows and can't put my hand on a solution.
In my navigation component Toolbar.js, I have the following code concerning the navigation item.
Toolbar.js
<li>
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="/"
>
agence
</NavLink>
</li>
Then I'm using the component as follows in Home.js :
Home.js
return (
<Layout>
<Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
<SideDrawer show={this.state.sideDrawerOpen} />
{backDrop}
<Conseil />
<div className={classes.white}></div>
<Sigles />
<NotreAgence />
<Prestations />
<ScrollableMenu />
<Form />
<Footer />
</Layout>
);
}
What I'm trying to do is navigate to the "NotreAgence" component when I click on the "accueil" NavLink showed above.
I've tried to mimic the html :
Go to Title
<div>
<h1 id="scroll">Title</h1>
</div>
as follows :
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to={{
pathname: '/',
hash: '#our-agency'
}}
>
agence
</NavLink>
and giving a div tag the "#our-agency" tag.
But it doesn't seem to work.
I'm a bit stuck. Any help ?
Thank you very much :)
to={{
pathname: '/',
hash: '#our-agency'
}}
when you have / in link - it force to update page.
So if you want to reach section on current page you need use just
to="#our-agency"
Quick update to close this issue. One solution would be to use the react-scroll library.
In the Navigation menu/bar :
import it => import { Link } from 'react-scroll'
Define your navigation item as follows (using the code of the question to make it more clear) :
Toolbar.js
import { Link } from 'react-router'
(...)
<li>
<Link
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="notreAgence"
>
agence
</Link>
</li>
Give your component an id prop with a value matching the to props from the Link. (Here it would be 'section1'.
Home.js
return (
<Layout>
...
<NotreAgence id='notreAgence' />
...
</Layout>
);
}
This do the the trick.
For more information : https://scotch.io/tutorials/implementing-smooth-scrolling-in-react
Related
I try to develop a pokedex using the pokeapi. For now it works fine, the pokemon are fetched correctly and are displayed in a container. Now i want to implement a function to search and filter the pokemon. Therefore i used MaterialUI to put a searchBar on top of the App.
The fetched pokemon are given from App.js to my Component PokemonList which maps the data. My idea is now to filter the pokemonData before it is given to PokemonList to map only the pokemon i am looking for. But here i am stuck. I have no idea how to connect the search function with my pokemonData Hook from App.js . Can you help me?
This is my searchBar Component:
const SearchAppBar = () => {
const [search, setSearch] = useState("");
console.log(search)
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" sx={{ bgcolor: "black"}}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
>
<img src={logo} alt="logo" width="150" height="auto" />
</Typography>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
onChange={(e) => setSearch(e.target.value)}
id = 'searchbox'
placeholder="Search for Pokémon..."
inputProps={{'aria-label': 'search'}}
/>
</Search>
</Toolbar>
</AppBar>
</Box>
);
}
export default SearchAppBar;
you should save the entered value from input into a state and filter your data based on that state
I am trying to get this field's error handling ui to render like this field's error handling ui
Note that in the correct (second) ui example, the error text is shown at the left. Ignoring the text color or and text font for now - how do I make the darn text ("asset bundle url is not valid....") align to the left?
My current styles
hr: {
border: '1px solid red'
},
errorDiv: {
align: "left",
flexDirection: 'column',
}
and where it is used in the code
<Box>
<label htmlFor="contained-button-file">
<Button
size="small"
variant={'outlined'}
color={'default'}
onClick={() => {
// eslint-disable-next-line
(uploadInputRef?.current as any)?.click();
}}
// disabled={isDisabled ? true : false}
>
{url ? 'Change Asset Bundle' : 'Add Asset Bundle'}
</Button>
</label>
{error ? (
<div className={classes.errorDiv}>
<hr className={classes.hr}></hr>
{error}
</div>
) : null}
</Box>
The Box is wrapped in an unstyled div. The component is wrapped in a Grid item component at the next level up.
Welp, I got it.
Used mui FormHelperText! (I continue to underestimate the breadth of MUI.)
import FormHelperText from '#mui/material/FormHelperText';
...
<Box>
<label htmlFor="contained-button-file">
<Button
size="small"
variant={'outlined'}
color={'default'}
onClick={() => {
// eslint-disable-next-line
(uploadInputRef?.current as any)?.click();
}}
// disabled={isDisabled ? true : false}
>
{url ? 'Change Asset Bundle' : 'Add Asset Bundle'}
</Button>
</label>
{error ? (
<div className={classes.errorDiv}>
<hr className={classes.hr}></hr>
<FormHelperText >{error}</FormHelperText>
</div>
) : null}
</Box>
RenderByTenantFunc({
wp: () => (
<Tooltip id="tooltip-fab" title="Home">
<Button className="home-button">
<a
href={
GAIN_ENV.toLowerCase() === 'staging'
? 'link1'
: 'link2'
}
rel="noopener noreferrer"
>
<div aria-label={translate('home')}>
<img
className="icon"
style={{
width: '22px',
height: '20px',
marginBottom: '-10px',
}}
src={SourceWpIcon}
alt={translate('home')}
/>
<span className="home-button-text">Home</span>
</div>
</a>
</Button>
</Tooltip>
),
})
If you are clicking on the Home button a new browser tab opens. This is very confusing to customers as they think they're being taken somewhere else. It should direct to the navigation selection in the same browser tab. I tried by removing target="_blank", but still navigating to a new browser, I was stuck here, please help me, guys.
the default value of target is _blank try with changing it to _self
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See NavigationBar > a > ... > Link > a
<a className="ui item nav-logout font-color">
{isLoggedIn ? (
<Link onClick={this.logout} to="/" >
Logout
</Link>
) : (
<Link to="/login">Login</Link>
)}
You are nesting a <a> tag into another <a> tag, change the parent to a <div>/<span> (or <li> if your nav items are in a list) :
<span className="ui item nav-logout font-color">
this error is about too many rendering elements inside of the component. so that try this command inside of the react fragment tag.
return(
<React.Fragment >
<a className="ui item nav-logout font-color">
{isLoggedIn ? (
<Link onClick={this.logout} to="/" >
Logout
</Link>
) : (
<Link to="/login">Login</Link>
)}
</React.Fragment>
);
I'm trying to make this into a react component so I can use it in my website:
I don't know how to go about making this or, if any libraries are involved, I don't know which ones.
it looks like this component will take a few properties:
const CardsDisplay = ({numCards}) => { /* ... */ }
const AvatarDisplay = ({imageUrl, numCards, name, score, popupMenu }) =>
<div style={{textAlign: 'center'}}>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<img src={imageUrl} />
<CardsDisplay numCards={numCards} />
</div>
{name}
<br />
{score.toLocaleString()}
<popupMenu style={{float: 'right'}} />
</div>