Attempted import error: does not contain a default export

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.