CODEWITHSUNDEEP
reactjsreact-router
malyikaj
malyikaj

Reputation: 11

React importing/exporting issues?

**Please let me know what I'm missing so that I could render these files on the screen. My goal is to show the 'Teachers List' data on the screen. But I keep getting an error code that it can't be found. I keep getting this error code: **

Error Code:

Failed to compile.

src/Teachers.js
  Line 5:18:  'TeacherList' is not defined  no-undef

Search for the keywords to learn more about each error.

I'm having issues posting this question because stack overflow keeps saying "it looks like your post is mostly code." So I'm adding more details here as a filler.

(Teachers.js file)

import React from 'react';
import TeacherList from '../data/teachers';

const Teachers = () => {
  let teachers = TeacherList.map((teacher) => {
    return (
      <li className="teacher" key={teacher.id} >
        <img className="teacher-img" src={teacher.img_src} alt="teacher" />
        <h3>{teacher.name}</h3>
        <p>{teacher.bio}</p>
      </li>
    );
  }); 
  
  return (
    <div className="main-content">
      <h2>Teachers</h2>
      <ul className="group">
        {teachers}    
      </ul>
    </div>
  );
}

export default Teachers;

(teachers.js file)

export const TeacherList = [
  {
    name: "Angie McAngular",
    bio: "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/angie.png",
    id: "teach-1"
  },
  {
    name: "NodeStradamus",
    bio: "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/nodestradamus.png",
    id: "teach-2"
  },
  {
    name: "Geo 'Lo' Cation",
    bio: "Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/geo.png",
    id: "teach-3"
  },
  {
    name: "Ecma Scriptnstuff",
    bio: "Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/ecma.png",
    id: "teach-4"
  },
  {
    name: "Jay Query",
    bio: "Jay is a developer, author of CSS: The Missing Manual, JavaScript & jQuery: The Missing Manual, and web development teacher.",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/jay.png",
    id: "teach-5"
  },
  {
    name: "Json Babel",
    bio: "All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.",
    img_src: "http://treehouse-code-samples.s3.amazonaws.com/bootstrap-4/img/json.png",
    id: "teach-6"
  }
];

export default TeacherList;

(App.js file)

import './App.css';
import {
  BrowserRouter,
  Route,
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Teachers from './Teachers.js';
import Header from './Header';
import Courses from './Courses';

const App = () => (
  <BrowserRouter>
    <div className="container">
      <Header />
      <Route exact path="/" component={Home} />
      <Route path="/about" render= { () => <About title='About' />} />
      <Route path="/teachers" component={Teachers} />
      <Route path="/courses" component={Courses} />
    </div>
  </BrowserRouter>
);

export default App;

Upvotes: 0

Views: 60

Answers (3)

Shyam
Shyam

Reputation: 5497

You need to do named import as TeacherList is not exported by default.

import { TeacherList } from 'from your path'

Upvotes: 1

tanmoy
tanmoy

Reputation: 1438

I ran your project. Ensure this structure is kept.

  • data
    • teachers.js
  • src
    • Teachers.js
    • App.js

Should work fine.

Upvotes: 0

saurav
saurav

Reputation: 141

in teacher.js i think there is no need to have default and named export both at the same time . So i request you to remove named export and use only default export .

eg: const teacherList = [];

export default teacherList;

Upvotes: 0

Related Questions