How to use React ScrollSpy with map function

[frietkip]

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?