Check the render method of `News`. i am getting this error in reactjs

Question

this is a code in react js and when i try to run it is giving error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

especially it is showing this line in the code

see the image for error

import React, { Component } from "react";
import  NewsItem  from "./NewsItem";
import "../App.css";
import Spinner from "./Spinner";
import PropTypes from "prop-types";

export default class News extends Component {
  static defaultProps = {
    country: "in",
    category: "general",
  };
  static propTypes = {
    country: PropTypes.string,
    category: PropTypes.string,
  };

  capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  constructor(props) {
    super(props);
    console.log("this is the constructor from news component");
    this.state = {
      articles: [],
      loading: false,
      page: 1,
    };
    document.title =
      this.capitalizeFirstLetter(this.props.category) + "-StarNews";
  }
  handlePrevClick = async () => {
    let url = `https://newsapi.org/v2/top-headlines?country=${
      this.props.country
    }&category=${
      this.props.category
    }&apiKey=561578a70b89478abce79fddfeae432b&page=${
      this.state.page - 1
    }&pageSize=15`;
    this.setState({ loading: true });
    let data = await fetch(url);
    let parseData = await data.json();
    this.setState({
      page: this.state.page - 1,
      articles: parseData.articles,
      loading: false,
    });
  };

  handleNextClick = async () => {
    if (this.state.page + 1 > Math.ceil(this.state.totalResults / 20)) {
    } else {
      let url = `https://newsapi.org/v2/top-headlines?country=${
        this.props.country
      }&category=${
        this.props.category
      }&apiKey=561578a70b89478abce79fddfeae432b&page=${
        this.state.page + 1
      }&pageSize=15`;
      this.setState({ loading: true });
      let data = await fetch(url);
      let parseData = await data.json();
      this.setState({
        page: this.state.page + 1,
        articles: parseData.articles,
        loading: false,
      });
    }
  };

  async componentDidMount() {
    let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=561578a70b89478abce79fddfeae432b&page=1&pageSize=15`;
    this.setState({ loading: true });
    let data = await fetch(url);
    let parseData = await data.json();

    this.setState({
      articles: parseData.articles,
      loading: false,
      author: parseData.author,
      published: parseData.publishedAt,
    });
  }

  render() {
    return (
      <div className="container my-3">
        <h1 className="text-center morn">StarNews-Top Headlines</h1>
        {this.state.loading && <Spinner />}
        <div className="row">
          {!this.state.loading &&
            this.state.articles.map((elements) => {
              return (
                <div className="col-md-4" key={elements.url}>
                  <NewsItem
                    source={elements.source.name}
                    author={elements.author}
                    time={elements.published}
                    title={elements.title}
                    description={elements.description}
                    imageurl={elements.urlToImage}
                    newsurl={elements.url}
                  />
                </div>
              );
            })}
        </div>
        <div className="container d-flex justify-content-between">
          <button
            disabled={this.state.page <= 1}
            type="button"
            className="btn btn-danger"
            onClick={this.handlePrevClick}
          >
            &larr; previous
          </button>
          <button
            disabled={
              this.state.page + 1 > Math.ceil(this.state.totalResults / 20)
            }
            type="button"
            className="btn btn-danger"
            onClick={this.handleNextClick}
          >
            next &rarr;
          </button>
        </div>
      </div>
    );
  }
}

Answer 1

The error you're getting is about the way you import/export components in your project. One of these (or both) two components: NewsItem & Spinner are imported incorrectly.

There are two ways of exporting: default or not. A default exported component is imported as: import Spinner from "./Spinner"; and normal exported component as: import { NewsItem } from "./NewsItem";.

So check both of the exports of these components to figure out where the error comes from.

Good luck!