1

So I'm creating a simple react app that export a file that contains a function that returns an array of objects:

export const listStudents = () => {
    return [{name:"Ljuben", lastName:"Angelkoski", indeks:"161161", nasoka:"KNI"},
            {name:"Pere", lastName:"Anastasov", indeks:"17350", nasoka:"PET"},
            {name:"Filip", lastName:"Shabanoski", indeks:"173521", nasoka:"PET"},
            {name:"Martin", lastName:"Krsteski", indeks:"163544", nasoka:"KNI"},
            {name:"Nikola", lastName:"Nacevski", indeks:"154874", nasoka:"ASI"}]; // replace the empty array with actual array with at least 5 student objects
}

And in my main component I have this code:

import React, {Component} from 'react'
import listStudents from './repository/studentRepository.js'

class Main extends Component{
    constructor(props){
        super(props);

        this.state={
            students: listStudents
        }
    }

    render(){
        return (
            <h2></h2>
        )
    }
}

export default Main

However when I run the app it gives me this error :

./src/Main.js
Attempted import error: './repository/studentRepository.js' does not contain a default export (imported as 'listStudents').

Any ideas?

David Daniels
  • 131
  • 1
  • 7
  • Edit: You need to properly `import` your `studentRepository.js` – Train Nov 13 '18 at 16:32
  • 1
    possible duplicate of [When should I use brackets with imports](https://stackoverflow.com/questions/42051886/when-should-i-use-brackets-with-imports/42051990#42051990) – Shubham Khatri Nov 13 '18 at 16:33
  • Also change this.state={ students: listStudents } to this.state={ students: listStudents() } – Hemadri Dasari Nov 13 '18 at 16:57
  • Did any of the answers work for you? Consider [accepting one of them](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235) if that's the case. – Tholle Nov 15 '18 at 10:46

2 Answers2

2

listStudents is a named export, so you must import it like this:

import { listStudents } from './repository/studentRepository.js'

If you don't want to change the import, you can use the default export for the function instead.

export default () => {
    return [/* ... */]; 
}
Tholle
  • 108,070
  • 19
  • 198
  • 189
0

If you didn't mention default export in children.js ,so you need to import with name.

import { liststudents } from './children';

Or you have to mention default export in children like

export default const list = []

and also its a function in children.js .so to get data from it, you need to call it like.

 this.state = {
    students: listStudents()
 }

simpler way would be defined them as array like

export const listStudents = [...students arr]
vamshi krishna
  • 2,618
  • 1
  • 11
  • 18