How to use React ScrollSpy with map function
frietkip opened this issue · 0 comments
frietkip commented
Hey Makotot,
I really like your module! Well done :) I am running into an error when trying to use react-scrollspy in a map function. Below is an example of the code. I have a NavBar with all articles you can click on. But react scroll spy does not work.
NavBar generates the href=`/home#{$article.title} to link to the articles being generated by Articles
class Home extends Component {
render () {
const {articles} = this.props
return (
<div class='NavBar>
{articles.map((items) => (
<NavBar
key={items.id}
{...items}
/>
))}
</div>
<div class='Articles>
{articles.map((items) => (
<Articles
key={items.id}
{...items}
/>
))}
</div>
)
}
export default Home
NavBarArticles
class NavBar extends Component {
render () {
const {title} = this.props
return (
<Scrollspy
items={title}
currentClassName="is-active"
componentTag="div"
>
<div id={id} class='navbar-item>
<ul><a href={`/home#${title}}>{title}</a>
</div>
</Scrollspy>
)
}
export default Navbar
class Articles extends Component {
render () {
const {title} = this.props
return (
<div id={id} class='article-item>
<ul><a href={`/home#${title}}>{title}</a>
</div>
)
}
export default Articles
Any suggestions on how to fix this?