Route within list-item - reactjs

Question

I want to render a Route inside a list item. When I click on the Link the li shall open and reveal the child component. I have tried this simple solution:
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
{
topics.map(topic => (
<li key={topic.id}>
<Link to={`${match.url}/${link.path}`}>
{topic.title}
</Link>
<Route path={`${match.path}/${topic.path}`}
component={Topic} />
</li>
))
}
</ul>
</div>
)
It works, but I'm not sure this is proper coding. Another variant I wrote is this:
class Topics extends Component {
state = { open: false }
handleClick = value => {
this.setState({ open: value })
}
render () {
const { match } = this.props
const { open } = this.state
return (
<div>
<h1>Topics</h1>
<ul>
{ topics.map(({ name, id }) => (
<li key={id}
className={(open===id) ? 'open' : null}>
<Link to={`${match.url}/${id}`}
onClick={() => this.handleClick(id)}>
{name}
</Link>
<div>
{
open===id ?
<Route path={`${match.path}/:topicId`}
render={({ match }) => (
<Topic
topic={topics.find(({ id }) =>
id === match.params.topicId)}
match={match}
/>)}
/> : null
}
</div>
</li>
))}
</ul>
</div>
)
}
}
Is anyone of these solutions good and proper? Any other suggestions on how to solve this?

Answer 1

I would recommend you define a new component for the Route and use the children property.

Answer 2

Do you mean something like this?
const ListItemLink = ({ to, ...rest }) => (
<Route path={to} children={({ match }) => (
<li className={match ? 'active' : ''}>
{ log(match) }
<Link to={to} {...rest}>
{ to }
</Link>
{ match ?
<h1>{match.url}</h1> : null }
</li>
)} />
)
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
{
LinksArray.map(link => (
<ListItemLink key={link.id}
to={`${match.url}/${link.path}`} />
))
}
</ul>
</div>
)