React Native TypeError undefined is not a function (near '...data.map...')

Question

I'm trying to load data from firebase in react native into a table but I keep getting this error. It works fine with any two dimensional array but when I load the 2d array from firebase the error comes up.

async function get_passwords(user) {
  const check_user = db.collection("users").doc(user);

  const doc = await check_user.get();

  const entries = Object.entries(doc.data());

  return entries;
}
function InfoScreen({ navigation, route }) {
  const { param1, param2 } = route.params;
  const stated = {
    tableHead: ["Info", "Password"],

    tableData: [
      ["1", "2"],
      ["a", "b"],
      ["1", "2"],
      ["a", "b"],
    ],
  };

  let entries = get_passwords(param1);

  return (
    <View>
      <Table>
        <Row data={stated.tableHead} />
        <Rows data={entries} />
      </Table>
    </View>
  );
}

entries will be undefined to start, since fetching them is asynchronous. Have you managed this in your Rows component? — Jayce444
– Jayce444, Commented Aug 21, 2020 at 3:23
The Rows component is imported from the react native table component so no. Do you know how I would rewrite this to fix it then? — Robert Beit
– Robert Beit, Commented Aug 21, 2020 at 3:52

Minho Ko · Accepted Answer · 2020-08-21 05:10:14Z

1

Since get_passwords is an async function, you need to use "await" for calling a function like

let entries = await get_passwords(param1);

with useState and useEffect

 const [entries, setEntries] = useState([]);

  useEffect(() => {
    getEntries(param1);
  }, [param1]);

  const getEntries = async (param) => {
    const passwords = await get_passwords(param);
    setEntries(passwords);
  }

edited Aug 21, 2020 at 5:10

answered Aug 21, 2020 at 4:20

Minho Ko

563 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Beit Over a year ago

It says I can only use await inside an async function and when I change InfoScreen to async it says Objects are not valid as a react child.

Minho Ko Over a year ago

Yep. So in my case, I use useState and useEffect together to get data for rendering like above one.

Collectives™ on Stack Overflow

React Native TypeError undefined is not a function (near '...data.map...')

1 Answer 1

with useState and useEffect

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

with useState and useEffect

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related