Why is this not rendering from a map, in react

Question

So I get items from a DB and console.log them just before, so I know they exist and are in the format I want them to be. I also wrote a simple method to make sure rendering works. The code looks something like this (is simplified for nonrelevantbits)

const renderSomething = () => {
getFromDB().then(function(data){
if (data) {
            console.log(data.something)  //returns an array in console          
          return data.something.map(somet => { 
                console.log(' somet is ' + somet) //return somet with quotes: ""              
                return <p>{somet}</p>
            })
        } else {
            console.log("No data!");
        }
}
}

and then in the return:

   return (
<div>
{renderSomething()}
</div>
)

And nothing appears on the screen. I made a test one to make sure it should:

const basic = () => {
    return ['abc', 'bca'].map(num =>  <h1>{num}</h1>)
}

 return (
        <div>
           {basic()}
        </div>
    )

The test one worked

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jonrsharpe, Oct 11 '20 at 09:55

twboc · Accepted Answer · 2020-10-15T20:44:50.987

Render function cannot be a promise. You should useEffect method to downlaod the data from api and then useState to set it for the component.

import React, { Fragment, useState, useEffect } from "react";
import ReactDOM from "react-dom";

function LiveVisitors() {
  const [visitors, setVisitors] = useState([
    {
      ip: "",
      countryCode: "",
      city: "Warsaw",
      state: "",
      country: "Poland"
    },
    {
      ip: "",
      countryCode: "",
      city: "Gdańsk",
      state: "",
      country: "Poland"
    }
  ]);
  const { ip, countryCode, city, state, country } = visitors;

  useEffect(() => {
    getUserData();
  }, []);

  const getUserData = () => {
    //imitate fetch
    setVisitors([
      ...visitors,
      {
    ip: "",
    countryCode: "",
    city: "Wrocław",
    state: "",
    country: "Poland"
      }
    ]);
  };

  return (
    <div>
      {visitors.map((el) => (
    <div>{el.city}</div>
      ))}
    </div>
  );
}

const wrapper = document.getElementById("container");
ReactDOM.render(<LiveVisitors />, wrapper);

Here is the interactive version where you can play with it. https://codesandbox.io/s/react-playground-forked-hqswi?file=/index.js:0-947

Why is this not rendering from a map, in react

1 Answers1