TypeError: Cannot read property 'url' of undefined at loadImage

Question

Getting an error when trying to map and array of URL strings from monogo atlas, these URLs are from google firebase which I manually created a collection in atlas and pasted URLs as strings. I commented out the map function to see if that was the cause for URL to be undefined and it is not. In order to target the property in nested data, I have used "res.data.data.url", which should work, but does not. I have a screen shot of this array from the console below. What is weird is before the data consoled as data object nested in another data object, and the URL nested in that object, now I just see the array object alone.

To get the array in the console I did res.data. Then I tried to get the url by: "res.url" and "res.data.url" and then "url" and nothing URL is still undefined.

I tested controller in express node and consoled the response and got back my array in full, I just get a 304 status in the terminal, so my theory is the issue is on the front end in react.

Can any one help me with this error in solving the undefined, is this why I am not able to see my images?

Here is the code

const Gallery = () => {

  const [url, setUrl] = useState([]);
  const history = useHistory();

  const loadImage = async () => {
    try {
      let res = await axios
      .get("http://localhost:5000/geturls");
     // console.log(res.data)
      setUrl(res.data.data.url);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
  // function to check login token
    loadImage();
  });
  // },[]);

  return (
    <div className="postverse">
      <Container className="mt-5 ml-auto mr-auto">
        <div className="mb-4 mt-4">
          <Navi />
        </div>
        <h1 className="text-center">
          ShareVerse
          <span className="text-success"> Gallery</span>
        </h1>
        <Row className="d-flex align-items-center justify-content-center">
          <Col className="mb-2" xs="12" lg="3">
            <Nav.Link href="/waterfall">
              {url.map((url) => (
                <Image alt="" className="img-fluid" src={`${url}`} thumbnail  />
              ))}
            </Nav.Link>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default Gallery;

Answer 1

Based on your console.log screenshot axios response data is an array of object so to only have an array of url you need to map it like this:

 const loadImage = async () => {
    try {
      let res = await axios
      .get("/data.json");
      console.log(res.data)
      setUrl(res.data.map(d=>d.url));
    } catch (error) {
      console.log(error);
    }
  };

and if you need to fetch data only at the render pass an empty array to useEffect dependencies:

  useEffect(() => {
  // function to check login token
    loadImage();

  },[]);

in the return i would change the url named variable to avoid confusion with your list something like:

 {url.map((urlData) => (
            <Image alt="" className="img-fluid" src={urlData} thumbnail  />
              ))}

you don't need to use ${url} you can directly pass urlData because is type of string
UPDATE
If you want an advice I would keep the array of Object from res.data because you will need to pass a key to <Image alt="" className="img-fluid" src={urlData} thumbnail />

so I would rename my state Variable by something like data and do something like:

const Gallery = () => {

  const [data, setData] = useState([]);


  const loadImage = async () => {
    try {
      let res = await axios
      .get("/data.json");
      console.log(res.data)
      setData(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
  // function to check login token
    loadImage();

  },[]);

    return (
    <div className="postverse">
      <Container className="mt-5 ml-auto mr-auto">
        <div className="mb-4 mt-4">
          <Navi />
        </div>
        <h1 className="text-center">
          ShareVerse
          <span className="text-success"> Gallery</span>
        </h1>
        <Row className="d-flex align-items-center justify-content-center">
          <Col className="mb-2" xs="12" lg="3">
            <Nav.Link href="/waterfall">
              {data.map((image) => (
                <Image key={image._id} alt={image.name} className="img-fluid" src={image.url} thumbnail  />
              ))}
            </Nav.Link>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default Gallery;