Gettin 'null' while fetching data from api with React Context

Question

I'm trying to get a bunch of articles from API using axios and useContext hook in React, but getting 'null' as a response. This is the code from "State" file

import React, { useReducer } from "react";
import axios from "axios";
import ArticleContext from "./articleContext";
import articleReducer from "./articleReducer";
import { GET_ARTICLE } from "../types";

const ArticleState = (props) => {
  const initialState = {
    article: null,
  };

  const [state, dispatch] = useReducer(articleReducer, initialState);

  const getArticle = async (id) => {
    try {
      const res = await axios.get(`/articles/${id}`);
      dispatch({ type: GET_ARTICLE, payload: res.data });
    } catch (err) {
      console.log("errrrr");
    }
  };

  return (
    <ArticleContext.Provider
      value={{
        article: state.article,
        getArticle,
      }}
    >
      {props.children}
    </ArticleContext.Provider>
  );
};
export default ArticleState;

This is code from "Reducer"

import { GET_ARTICLE } from "../types";
// eslint-disable-next-line import/no-anonymous-default-export
export default (state, action) => {
  switch (action.type) {
    case GET_ARTICLE:
      return {
        ...state,
        article: action.payload,
      };
    default:
      return state;
  }
};

And finally code from the component, where i' trying to render data from the api call response and getting TypeError: article is null Am i missing something here? The main App component is also wrapped in <ArticleState></ArticleState>.

import React, { useEffect, useContext } from "react";
import ArticleContext from "../../context/article/articleContext";

const Article = () => {
  const articleContext = useContext(ArticleContext);
  const { article, getArticle } = articleContext;
  useEffect(() => {
    getArticle();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="article" key={article.id}>
      <h2 className="article__title">{article.Title}</h2>
      <p className="article__body">{article.preview}</p>
    </div>
  );
};

export default Article;

lpizzinidev · Accepted Answer · 2021-11-11 15:59:17Z

3

You should check if the article has been set before displaying its data.
Add a condition to the component before rendering the article informations:

const Article = () => {
  const articleContext = useContext(ArticleContext);
  const { article, getArticle } = articleContext;

  useEffect(() => {
    getArticle();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!article) {
      return <>Loading article...</>
  }

  return (
    <div className="article" key={article.id}>
      <h2 className="article__title">{article.Title}</h2>
      <p className="article__body">{article.preview}</p>
    </div>
  );
};

answered Nov 11, 2021 at 15:59

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gettin 'null' while fetching data from api with React Context

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related