Attempted import error: does not contain a default export - reactjs

Question

I'm defining react component to connect with redux . I have the app and list components
App.js
import React, { Component } from 'react';
//import Login from './components/Login';
import List from './components/List';
import './App.css';
class App extends Component {
render() {
return ( <List />); } }
export default App;
List.js
import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps= state =>{
return { articles :state.articles};
}
const connectedList = ({ articles }) =>(
{articles.map(e=>( //////**1) here I get red under the dot(.) ie., error**
<li key={e.id}>{e.title}</li>
))}
);
const List= connect(mapStateToProps)(connectedList);
export default List;
why do 1) here I get red under the dot(.) ie., error
I have exported List but I'm thrown this error
Attempted import error: './components/List' does not contain a default export (imported as 'List').
Actually I'm newbie to redux so Please explain lemme know where i'm going wrong?

Answer 1

Remove curly brace:
const connectedList = ({ articles }) =>(
articles.map(e=>( // implicit return
<li key={e.id}>{e.title}</li>
)
));
Or, using curly brace:
const connectedList = ({ articles }) => { // no parentheses
return articles.map(e=>( // explicitly use return
<li key={e.id}>{e.title}</li>
)
});
Using curly brace in parentheses indicates that you're returning an object. But articles.map... is obviously not an object rather looping through an object.