Routing with Link is not working with const component react redux - reactjs

Question

I want a link in the but then i dont know how to i use it with const
with class it works. can anyone please explain about const components
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
const mapStateToProps= state =>{
return { articles :state.articles};
}
const connectedList = ({ articles }) =>(
articles.map(e=>(
<li key={e.id}>{e.title}</li>
))
<Link to="/Form">Form</Link>//// this line is error thrown
);
const List= connect(mapStateToProps)(connectedList);
export default List;
I know I'm do it the wrong way as i have no idea how do i achieve it the right way

Answer 1

You have some syntax errors. Most importantly, your "connectedList" didn't actually return/render anything.
You would have run into other problems because you hadn't wrapped your array of <li>s into a <ul>, but also, a React component render expects there to be only a single element at the top-level -- which is why I wrapped everything in a <div>.
I've cleaned up some items for clarity and used a React class instead of a functional component:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class List extends React.Component {
render() {
const { articles } = this.props
const articleListItems = articles.map(article => {
return <li key={article.id}>{article.title}</li>
})
return (
<div>
<ul>
{articleListItems}
</ul>
<Link to="/Form">Form</Link>
</div>
)
}
}
const mapStateToProps = state => {
return {
articles: state.articles
}
}
const ListContainer = connect(mapStateToProps, null)(List)
export default ListContainer