React doesn't render array

Question

my React code doesn't works.
I've an array, and, for each item, I need to render a card.
But it doesn't works.
This is all the code:

const Home: NextPage = () => {
  const [servers, setServers] = useState({});

  async function getServers() {
    console.log('ready');

    const response = await fetch('http://localhost:3000/server/servers').then(
      (res) => res.json()
    );

    setServers(response);
    console.log(response);

    console.log('servers object updated: ' + JSON.stringify(servers));
  }

  useEffect(() => {
    getServers();
    import('bootstrap/dist/js/bootstrap');
    WebFont.load({
      google: {
        families: ['Karla:600', 'sans-serif'],
      },
    });
  }, []);

  useEffect(() => {
    console.log('servers object updated: ' + JSON.stringify(servers));
  }, [servers]);

  return (
    <div className="app">
      <div className="container">
        <div className="row" style={{ color: 'white' }}>
          {servers.database?.map((server, index) => (
            <div key={index} className="col">
              <div
                className="card"
                style={{
                  width: '18rem',
                  backgroundColor: '#101114',
                  color: 'white',
                  marginTop: '80px',
                  borderRadius: '15px',
                  boxShadow: '4px 3px 5px 0px #7335fb',
                }}
              >
                <img
                  src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512"
                  className="card-img-top"
                  alt="Icona server"
                  style={{
                    borderRadius: '50%',
                    width: '96px',
                    marginLeft: '20px',
                    marginTop: '60px',
                  }}
                />
                <div className="card-body">
                  <h5 className="card-title">
                    {servers.bot[index].name || 'Errore!'}
                  </h5>
                  <br />
                  <p className="card-text">{server.shortDescription}</p>
                  <br />
                  <a
                    href="#"
                    className="btn"
                    style={{ backgroundColor: '#5316d9', color: 'white' }}
                  >
                    Entra
                  </a>
                  <a
                    href="#"
                    className="btn"
                    style={{
                      marginLeft: '10px',
                      backgroundColor: '#5316d9',
                      color: 'white',
                    }}
                  >
                    Visita
                  </a>
                  <br />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Home;

The problem is here:

servers.database?.map((server, index) => (
  <div key={index} className="col">
    <div
      className="card"
      style={{
        width: '18rem',
        backgroundColor: '#101114',
        color: 'white',
        marginTop: '80px',
        borderRadius: '15px',
        boxShadow: '4px 3px 5px 0px #7335fb',
      }}
    >
      <img
        src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512"
        className="card-img-top"
        alt="Icona server"
        style={{
          borderRadius: '50%',
          width: '96px',
          marginLeft: '20px',
          marginTop: '60px',
        }}
      />
      <div className="card-body">
        <h5 className="card-title">{servers.bot[index].name || 'Errore!'}</h5>
        <br />
        <p className="card-text">{server.shortDescription}</p>
        <br />
        <a
          href="#"
          className="btn"
          style={{ backgroundColor: '#5316d9', color: 'white' }}
        >
          Entra
        </a>
        <a
          href="#"
          className="btn"
          style={{
            marginLeft: '10px',
            backgroundColor: '#5316d9',
            color: 'white',
          }}
        >
          Visita
        </a>
        <br />
      </div>
    </div>
  </div>
));

Here the console output:

Someone know why it doesn't works?
No error, all works fine, but he doesn't load array.
VScode tell me that the initial useState value doesn't contain necessary data, but it arrive from database after, so I don't care.
If you have any suggestion/solution, please tell me.
Thanks in advance and sorry for bad English!

Your API response does not have a `.database` property. Figure out what you want to render from the API response, and navigate the object accordingly. — CertainPerformance, Dec 12 '21 at 22:17

Drew Reese · Accepted Answer · 2021-12-12T22:23:10.423

If you check your console.log("servers object updated: " + JSON.stringify(servers)); log you'll see that it's an object without a database property.

From what I can see of the logged state, the render should use the servers.servers property array to map:

{servers.servers?.map((server, index) => (
  <div key={index} className="col">
    <div className="card" style={{ width: "18rem", backgroundColor: "#101114", color: "white", marginTop: "80px", borderRadius: "15px", boxShadow: "4px 3px 5px 0px #7335fb" }}>
      <img src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512" className="card-img-top" alt="Icona server" style={{ borderRadius: "50%", width: "96px", marginLeft: "20px", marginTop: "60px" }} />
      <div className="card-body">
        <h5 className="card-title">{servers.bot[index].name || "Errore!"}</h5><br />
        <p className="card-text">{server.shortDescription}</p><br />
        <a href="#" className="btn" style={{ backgroundColor: "#5316d9", color: "white" }}>Entra</a>
        <a href="#" className="btn" style={{ marginLeft: "10px", backgroundColor: "#5316d9", color: "white" }}>Visita</a>
        <br />
      </div>
    </div>
  </div>
))}

@BlackdestinyXX Yes, sorry... took a look at the properties you were trying to access and took a closer look at the response in the image and noticed there was more than one array there. — Drew Reese, Dec 12 '21 at 22:26

React doesn't render array

1 Answers1