CODEWITHSUNDEEP
javascriptreactjsjsxsupabase
bestcode123
bestcode123

Reputation: 11

REACT - Supabase

I am Running this piece of code:

import { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient("https://<project>.supabase.co", '<anon-key>');

const GetBalance = () => {
    const [data, setData] = useState([]);

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

    async function getData() {
        const { udata } = await supabase.from("balances").select();
        setData(udata);
    }

    return (
        <ul>
            {data.map(transactions => (
                <li key={transactions.balance}>{transactions.balance}</li>
            ))}
        </ul>
    )
}

export default GetBalance;

it responds with 'Cannot read properties of undefined (reading 'map').' I have disables RLS on supabase and the table does include data and is not empty.

Is this a syntactical error in my code? or have I configured my supabase project incorrectly? I have searched online and disables RLS however it has done nothing

I was trying to connect to my database on supabase but it would connect but not display data. I then disables RLS and it spits out this error

Upvotes: 0

Views: 635

Answers (2)

bestcode123
bestcode123

Reputation: 11

I figured that if i change the line

const { udata } = await supabase.from("balances").select();

to

const { data: udata } = await supabase.from("balances").select();

it would work as it was a variable issue with the nameing

Upvotes: 1

P J Borowiecki
P J Borowiecki

Reputation: 1

The first step would be to console.log 'data' to see if you are getting any. Seems like the 'data' is undefined. You could also try writing this:

{data?.map((transactions) => (
    <li key={transactions.balance}>{transactions.balance}</li>
))}

Also, I believe you intentionally replaced the actual project id and key values in the line below with and , but just making sure:

const supabase = createClient("https://<project>.supabase.co", '<anon-key>');. Of course, these should be values you get from your project dashboard.

Upvotes: 0

Related Questions