Next.js Discord

Discord Forum

Attempting to display fetched data

Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
I'm trying to display some data that I'm fetching from my Supabase table. I followed some guides and the official docs but nothing is showing up in my components. Anyone able to clear up my confusion on this?

'use client';
import React, {useEffect, useState} from 'react';
import {createClientSupabase} from '/utils/server'


const MiniWindow =  ({title}) => {
    const [sensorData, setSensorData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const supabase = createClientSupabase();
            const { data, error } = await supabase
                .from('sensor_data')
                .select('*')
                .eq('sensor_id', title);
            if (error) {
                setError(error);
            } else {
                setSensorData(data);
            }
            setLoading(false);
        };
        fetchData();
    }, [title])

    return (
        <div
            className="bg-[#708075] box-content rounded-lg shadow-lg flex-auto flex-col p-6 m-6 min-w-72 min-h-96 max-h-144 content-start overflow-auto grow-0">
            <h2 className="box-border flex flex-auto text-[#f2f1f1] text-2xl justify-center mb-4 font-amiri">{title}</h2>
            <ul>
                {sensorData.map((sensor) => {
                        <li key={sensor.id}>
                            <strong>Soil Moisture:</strong> {sensor.moisture}
                        </li>
                    }
                )}
            </ul>

        </div>
    );
};

export default MiniWindow;

12 Replies

Spectacled bear
Add a console log here to see what data you're receiving
else {
console.log(data) // this statement
setSensorData(data);
}
@Spectacled bear Add a console log here to see what data you're receiving > else { > console.log(data) // this statement > setSensorData(data); > }
New Guinea Freshwater CrocodileOP
I was able to see I'm getting some 'Bad Request' errors, I tried changing some things but it's still showing 'Bad Request'

'use client';
import React, {useEffect, useState} from 'react';
import {createClientSupabase} from '/utils/server'


const MiniWindow =  ({title, sensor_id}) => {
    const [sensorData, setSensorData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const supabase = createClientSupabase();
            const { data, error } = await supabase
                .from('sensor_data')
                .select('*')
                .eq('sensor_id', sensor_id);
            if (error) {
                setError(error);
            } else {
                console.log(data) // this statement
                setSensorData(data);
            }
            setLoading(false);
        };
        fetchData();
    }, [title])

    return (
        <div
            className="bg-[#708075] box-content rounded-lg shadow-lg flex-auto flex-col p-6 m-6 min-w-72 min-h-96 max-h-144 content-start overflow-auto grow-0">
            <h2 className="box-border flex flex-auto text-[#f2f1f1] text-2xl justify-center mb-4 font-amiri">{title}</h2>
            <ul>
                {sensorData.map((sensor) => {
                        <li key={sensor.id}>
                            <strong>Soil Moisture:</strong> {sensor.moisture}
                        </li>
                    }
                )}
            </ul>

        </div>
    );
};

export default MiniWindow;
@Spectacled bear Seems like you are not receiving the data but an error. Add a console statement in the error block as well and print the error
New Guinea Freshwater CrocodileOP
Looks like it's actually getting the data now but it still doesn't show up.

    useEffect(() => {
        const fetchData = async () => {
            const supabase = createClientSupabase();
            const { data, error } = await supabase
                .from('sensor_data')
                .select('*')
                .eq('id',sensor_id);
            if (error) {
                console.error("Error fetching data:", error.message); // Log the error message
                setError(error.message);
            } else {
                console.log(data) // this statement
                setSensorData(data);
            }
            setLoading(false);
        };
        fetchData();
    }, [title])

    return (
        <div
            className="bg-[#708075] box-content rounded-lg shadow-lg flex-auto flex-col p-6 m-6 min-w-72 min-h-96 max-h-144 content-start overflow-auto grow-0">
            <h2 className="box-border flex flex-auto text-[#f2f1f1] text-2xl justify-center mb-4 font-amiri">{title}</h2>
            <ul>
                {sensorData.map((sensor) => {
                        <li key={sensor.id}>
                            <strong>Soil Moisture:</strong> {sensor.moisture}
                        </li>
                    }
                )}
            </ul>

        </div>
    );
};

export default MiniWindow;
@Spectacled bear What are you gettin in data? Can you share? Should be a array
New Guinea Freshwater CrocodileOP
I added a console.log(sensor.id) in the <li> part just to see what it was using and it lines up with the DB. Don't know why it's showing up multiple times though
Spectacled bear
{sensorData.map((sensor) => (
<li key={sensor.id}>
<strong>Soil Moisture:</strong> {sensor.moisture}
</li>
)
)}
try this code
New Guinea Freshwater CrocodileOP
@Spectacled bear
This one is with the updated code
@Spectacled bear > {sensorData.map((sensor) => ( > <li key={sensor.id}> > <strong>Soil Moisture:</strong> {sensor.moisture} > </li> > ) > )}
New Guinea Freshwater CrocodileOP
Got it working now, had some weird naming conflicts between my table and the code. Thank you for your help!