2

I am in the midst of creating a recipe app and use context API to ensure the data I fetched from an API call is available in all my components. Everything works as it should on first glance.

The issue is that when I reload/open a component (these are dependent on the state that is passed from the context Provider) in a new tab- everything breaks as the state is empty.

I checked stack overflow for answers, but none of them seem to provide an answer that is not hacky. Does anyone have any tips on how I can make my data persist on the contextApi after a reload?

An example of a component that breaks due to this issue is shown below 

import React, { useContext } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import RecipeCard from '../RecipeCard/RecipeCard';
import './ResultsPage.css';
import NavBar from '../NavBar/NavBar';
import { CocktailContext } from '../../context/CocktailContext';
import { v4 as uuidv4 } from 'uuid';
import LayOut from '../LayOut/LayOut';

export default function ResultsPage(props) {
    const { recipes } = useContext(CocktailContext);
    const drink = props.match.params.name;

    return (
        <LayOut>
            <Container fluid className="ResultsPage ">
                <NavBar />
                <Col sm={12} className="ResultsPage-header-content">
                    <p className="ResultsPage-p font-style-2">You know what's always a good idea?</p>
                    <h1 className="ResultsPage-h2 font-style-1">{props.match.params.name.toUpperCase()}!</h1>
                </Col>
                <Row>
                    <Col>
                        <Row className="ResultsPage-recipe-cards mb-5">
                            {recipes &&
                                recipes.map((recipe) => (
                                    <RecipeCard
                                        strDrink={recipe.strDrink}
                                        strDrinkThumb={recipe.strDrinkThumb}
                                        strGlass={recipe.strGlass}
                                        drink={drink}
                                        key={uuidv4()}
                                    />
                                ))}
                        </Row>
                    </Col>
                </Row>
            </Container>
        </LayOut>
    );
}
Kisho
  • 307
  • 2
  • 4
  • 13
  • 2
    This is expected, the context API is only meant to help you not have to pass properties down each element in a component tree. It does nothing for persistent state management. You'll need to add some code that both stores the state into something like localStorage and also loads it from localStorage on page load. See some code examples herehttps://medium.com/@akrush95/global-cached-state-in-react-using-hooks-context-and-local-storage-166eacf8ab46 – Milton May 03 '20 at 19:51
  • For data persistent in the browser, there are several tools that can help you like localStorage, indexDB or Redux – Melchia May 03 '20 at 19:59
  • 2
    I understand that local storage can be used for this, but it seems rather counterproductive to be providing the ability to share state across components and then having it disappear on a page load :/ – Kisho May 03 '20 at 21:50

0 Answers0