React router Validating DOM Nesting error - react-router

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>
);

Related

How to change the classname of next sibling in React js?

I am trying to toggle the classname of the clicked element's next sibling element. Here the code:
<li>
<Link onClick={(event) => event.currentTarget.nextElementSibling.classList.toggle("show")}>Nav Item A</Link>
<ul className='submenu'>
<li>
<Link to="#0" onClick={closeMenu} >Submenu Item 1</Link>
</li>
<li>
<Link to="#0" onClick={closeMenu} >Submenu Item 2</Link>
</li>
</ul>
</li>
<li>
<Link onClick={(event) => event.currentTarget.nextElementSibling.classList.toggle("show")}>Nav Item B</Link>
<ul className='submenu'>
<li>
<Link to="#0" onClick={closeMenu} >Submenu Item 3</Link>
</li>
<li>
<Link to="#0" onClick={closeMenu} >Submenu Item 4</Link>
</li>
</ul>
</li>
But in console, after it toggles to "show", many errors come and it doesn't remove "show" on next click since it stucks. Errors are like this:
Uncaught ReferenceError: process is not defined
and
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
history.js:47 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
at createPath (history.js:47:1)
at navigate (Link.js:104:1)
at onClick (Link.js:51:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
at invokeGuardedCallback (react-dom.development.js:292:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1)

You're using React the wrong way.
You need use to use state.
//Submenu.js
export const Submenu = (children) => {
const[active, setActive] = useState("false")
const toggleActive = () => setActive(!active);
return(
<div>{children}</>
);
//Main.js
<li>
<Link onClick={toggleActive} />
{active && <Submenu>....children....</Submenu>
</li>

Adding HTML markup in react bootstrap tooltip

Is it possible to show some custom HTML markup in react bootstrap tooltip component
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
{record.desc}
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
The value displayed in the tooltip (record.desc) is having some html code which I want to add to this tooltip.

Can you try with dangerouslySetInnerHTML?
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>

you can try with dangerouslySetInnerHTML
const tooltip = (
<Tooltip id="Description__tooltip">
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>
);
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={tooltip}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>

from in your problem, if you want to insert DOM Element in children, we must do function to wrapper the props which DOM element contains. we can use dangerouslySetInnerHTML. example code like this below.
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{__html:record.desc}} />
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>

on ReactJS, can't handle a navigation to a div in page from the navigation bar

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

How to maintain button location regardless of image size

I try to fix button location when image is added.
I want the button location to be always horizontal.
front : React
css framework : semantic-ui-react
render() {
return (
<Container text style={{marginTop: '3em'}}>
<Header as="h1">{this.state.article.title}</Header>
<this.Paragraph />
{(this.state.article.imageNames || []).map(function(articleData, i) {
return (
<img
src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
articleData.name
}`}
alt="new"
/>
);
})}
{/* TODO fix button location when image exists */}
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
{this.renderRedirect()}
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
);
}
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At particular image size, button location is like this:
I want the button location to be always horizontal like this:
I expect the button location is always horizontal.
But the actual is not always according to image size.

As #Arup suggested, This issue is resolved by flexbox.
<Container style={{display: 'flex'}}>
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>

when anchor tag replaced by <Link>, onKeyDown (accessibility) handlers lost/not working

Replaced <a> with react-router <Link/>. onClick and href (now 'to') work as expected. onKeyDown is lost. How to keep 'accessible' - ensure onKeyDown() works?
<a className='focusable'
href={'/a/b/c'}
onClick={this.handleClick.bind(this)}
onFocus={this.handleOnFocus}
onKeyDown={this.handleKeyDown.bind(this)}
ref={(ref) => {this.aref = ref;}}
tabIndex='-1'
>
...
</a>
replaced by:
<Link className='focusable'
to={'/a/b/c'}
onClick={this.handleClick.bind(this)}
onFocus={this.handleOnFocus}
onKeyDown={this.handleKeyDown.bind(this)}
ref={(ref) => {this.aref = ref;}}
tabIndex='-1'
>
...
</Link>

Have you tried an ARIA role for this? (I've linked to the less dry MDN version of the documentation)
Might look like this:
<Link className='focusable'
to={'/a/b/c'}
onClick={this.handleClick.bind(this)}
onFocus={this.handleOnFocus}
onKeyDown={this.handleKeyDown.bind(this)}
ref={(ref) => {this.aref = ref;}}
tabIndex='-1'
role='link'
>
...
</Link>
Worth a shot