0

I'm building my first ReactJS website converting an old website.

I need get the data from a server and then display it in 2 different part of my website.

In the old website I figured out how to do, but using React I've no idea.

I've tried to pass the data between the components using global.var, and it seemed to work until I do on the other component

return indirizzi.map(indirizzo => {
    return (
      <Indirizzo
        key={indirizzo.Indirizzo}
        Titolo={indirizzo.Indirizzo}
        id={2}
      />
    );
  });

it gives the error: 

TypeError: Cannot read property 'map' of undefined

This is the component that fetches data from the server.

/FullNavBar.js

import React, { useEffect, useState } from "react";
import Brand from "./Foto/Brand";
import NavBarItem from "./Elementi/NavBarItem";
import MenuIcon from "./Elementi/MenuIcon";
import "../App.css";

function FullNavBar() {
  const [indirzzi, cambiaIndirizzi] = useState([]);

  const fetchIndirizzi = async () => {
    let indirizzi = await fetch(
      "https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
    );
    indirizzi = await indirizzi.json();

    global.indirizzi = indirizzi;

    cambiaIndirizzi(indirizzi);
    console.log(indirizzi);
  };
  useEffect(fetchIndirizzi, []);
  return (
    <nav>
      <Brand />
      <div id="menu">
        <div id="menu-toggle">
          <MenuIcon />
        </div>{" "}
        <ul>
          {" "}
          {indirzzi.map((indirizzo, indice) => {
            return (
              <NavBarItem
                key={indice}
                indirizzo={indirizzo.Indirizzo}
                indice={indice}
              />
            );
          })}{" "}
        </ul>{" "}
      </div>{" "}
    </nav>
  );
}

export default FullNavBar;

This is the component that should take te data from the first one and show them

/Indirizzi.js

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Indirizzo from "./Indirizzo";
import "../App.css";

function Indirizzi() {
  const [materie, cambiaMaterie] = useState([]);
  const [indirizzi, cambiaIndirizzi] = useState([]);

  const fetchMaterie = async () => {
    let indirizzo = "Trasversale";
    let materie = await fetch(
      `https://vps.lellovitiello.tk/Riassunty/API/materie.php?indirizzo=${indirizzo}`
    );
    materie = await materie.json();
    cambiaIndirizzi(global.indirizzi);
    /*indirizzi = global.indirizzi;*/
    cambiaMaterie(materie);
    console.log(materie);
    a();
  };

  const a = () => {
    console.log(this);
  };

  useEffect(fetchMaterie, []);

  return indirizzi.map(indirizzo => {
    return (
      <Indirizzo
        key={indirizzo.Indirizzo}
        Titolo={indirizzo.Indirizzo}
        id={2}
      />
    );
  });
}

export default Indirizzi;

Can you please help me?

Davide Vitiello
  • 328
  • 1
  • 2
  • 12
  • Does this answer your question? [React cannot read property map of undefined](https://stackoverflow.com/questions/45419575/react-cannot-read-property-map-of-undefined) – Sunil Chaudhary Feb 17 '20 at 16:41
  • The problem is here: `cambiaIndirizzi(global.indirizzi);`. That will set `indirizzi` to `undefined` because it runs before the other component has stored the data. Luckily, you're not supposed to do this anyway. Load the address data in the closest common parent, then pass it down to the components that need it. Or create a separate component just for the addresses, then use that in the two places. –  Feb 17 '20 at 16:50
  • This question isn't a dupe of the other one; just ignore that. Still, functional components have a `state` just like class components do. –  Feb 17 '20 at 16:53
  • So the best thing to do is to set everything to a class? – Davide Vitiello Feb 17 '20 at 16:55
  • 1
    No, not at all. Did you not read my first comment? You are not supposed to store stuff in the `global` object like that. You need to load the addresses is *one* place, then pass them down as `props` to the components that need them. –  Feb 17 '20 at 16:56
  • Yeah now I get that, but this 2 components aren't related, how can I set the data of the first component from the second one or how can I make a separate component that only stores the data? `
    {" "}
    {" "} ` This is app.js     – Davide Vitiello Feb 17 '20 at 17:01
  • 2
    Why not load the data in `App.js` and pass it on to both children? `` and ``? –  Feb 17 '20 at 17:37
  • Yeah why not, but in `` everything work but `` I get an array with 0 elements – Davide Vitiello Feb 17 '20 at 18:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208003/discussion-between-davide-vitiello-and-chris-g). – Davide Vitiello Feb 17 '20 at 18:13
  • Sorry, let's not. I don't do tree tutoring. If you have an additional question, feel free to ask it here. –  Feb 17 '20 at 18:46

0 Answers0