0

So i've been trying to show an image on my page with an API, but everytime I go to the page I see the image for a few seconds and after that the page refreshes and it shows an error:

Uncaught TypeError: location is undefined

I think the problem could be about the way I used my image, but i am not sure. If I console log the image it just shows the correct image name. This is the code I used:

import { Row, Col } from "react-grid-system";
import { Separator } from "@fluentui/react";
import * as React from "react";
import { useEffect, useState } from "react";

function Recipe(props) {

  const axios = require('axios');
  const api = axios.create({
    baseURL: 'http://localhost:5000/',
    timeout: 10000
  })
  const [recipe, setRecipe] = useState({});
  const [image, setImage] = useState({});

  useEffect(() => {
    getRecipe()

  }, [])

  function getRecipe() {
    api.get('/recipe/' + props.id).then(res => {
      setRecipe(res.data);
      setImage("https://localhost:5001/Uploads/" + res.data.image)
    });
  }

  return (
    <div>
      <div>
        <Row>
          <Col sm={6} md={6} lg={6}>
            <img style={{ width: "700px", marginTop: "20px" }} src={image} alt={"error"} />
          </Col>

          <Col style={{ marginTop: "20px" }} sm={6} md={6} lg={6}>
            <Separator className={"Separator"} />
            <h1>Naam: <div style={{ fontSize: "20px" }}>{recipe.name}</div></h1>
            <h1>Ingredienten: <div style={{ fontSize: "20px" }}> {recipe.ingredients}</div>
            </h1>
            <h1>Macro's:
              <div style={{ fontSize: "20px" }}>
                <ul>
                  <li>Kcal: {recipe.carbs}</li>
                </ul>
              </div>
            </h1>
            <h1>Voorbereiding: <div style={{ fontSize: "12px" }}>

              {recipe.preparation} </div></h1>

          </Col>

        </Row>

      </div>

    </div>
  )
}
export default Recipe
sam
  • 1,767
  • 12
  • 15
Daan Matheeuwsen
  • 1
  • can you show the whole error stack – abhi patil Nov 05 '21 at 12:49
  • Based on the error [It sounds like you're using react-router somewhere](https://stackoverflow.com/questions/42892488/react-router-v4-0-0-uncaught-typeerror-cannot-read-property-location-of-unde) but your code doesn't show that. Are you using react-router? – Andy Nov 05 '21 at 12:51
  • you've defined state as `const[image, setImage] = useState({});` object but setting the state with the string. why is that? – abhi patil Nov 05 '21 at 12:55
  • @ahbipatil this is the full error: `Uncaught TypeError: location is undefined createPath history.js:47 navigate Link.js:104 onClick Link.js:51 React 14 unstable_runWithPriority scheduler.development.js:468 React 15 js index.js:10 js main.chunk.js:2973 Webpack 7` – Daan Matheeuwsen Nov 05 '21 at 13:46
  • @Andy I do have a Router, the code that goes to this page is: ` }/>`. I think it goes wrong in this part of the code – Daan Matheeuwsen Nov 05 '21 at 13:52
  • @DaanMatheeuwsen take a look at the answers in the link I provided and see if they can help, or google that error + react-router to see if anything else crops up. – Andy Nov 05 '21 at 13:54

0 Answers0