Class Component --> Expecting string/class/function got object --> component pass to other component -->react

Question

// -----App.js

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import News from './components/News';
import NewsItem from './components/NewsItem';


function App() {
  return (
    <div>
      <Navbar />
      <News />

    </div>

  );
}

export default App;


// ----- News.js

import React, { Component } from 'react'
import NewsItem from './NewsItem';

export class News extends Component {
    render() {
        return (
            <div>
                <NewsItem />
            </div>
        )
    }
}

export default News


//-----  NewsItem.js

import React, { Component } from 'react'

export class NewsItem extends Component {
  render() {
    return (
      <div>
          NewItem component
      </div>
    )
  }
}

export default NewsItem

I am new to react and trying to learn the basics.I tried to resolve the issue but couldn't find out the actual cause. I tried to search same issue over the internet but can't find any. All though the error msg is same but situation is different.

As you can see the NewsItem.js component is passed to News.js. Is it ok to pass a class component to another class component as a return type?

I'm getting the error as shown in img.

enter image description here

Answer 1

Try to remove export before defining the class

class News extends Component ...

class NewsItem extends Component ...

You are already default exporting it at the bottom