API not fetch data with dynamic page

[Abahussain]

The dynamic page is working but does not fetch the data from any API

this is my dynamic page code
please help me to fix this issue

Path : src\app\Stocks[ticker]\page.js

code :
"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const StockDetailsPage = () => {
const router = useRouter();
const [stockData, setStockData] = useState([]);

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

const fetchData = async () => {
try {
const apiUrl = "http://localhost:4000/stocks";
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
const data = await response.json();
console.log("API Response:", data); // Log the API response
if (!data || !data.stocks || !Array.isArray(data.stocks)) {
throw new Error("Invalid data format");
}
setStockData(data.stocks); // Assuming the data is structured with a "stocks" array
} catch (error) {
console.error("Error fetching data:", error);
setStockData([]);
}
};

return (
<>

Stock Data

{stockData.map((stock) => (

{stock.ticker_id}

{stock.company_name}

Price: {stock.price}

Change: {stock.change}

Change Percent: {stock.change_percent}

Previous Close: {stock.prev_close}

Open: {stock.open}

Low: {stock.low}

High: {stock.high}

52 Weeks High: {stock["52_weeks_high"]}

52 Weeks Low: {stock["52_weeks_low"]}

Market Cap: {stock.market_cap}

Volume: {stock.volume}

Average Volume (3 Months): {stock.avg_vol_3_months}

Turn Over: {stock.turn_over}

Range: {stock.range}

Shares Outstanding: {stock.shares_outstanding}

Shares Float: {stock.shares_float}

))}

</>
);
};

export default StockDetailsPage;

I was trying with multiple APIs, working in the console only

[mutasim77]

It's really difficult to read your code because it's plain text, I would even say it's impossible. Next time when you ask a question, please provide the code fully and clearly within a code block. Also, write "what did you try and what kind of error it's throwing". So, anyway, I will give you an example with a dummy API, which should work without any issue:

"use client";

import { useEffect, useState } from "react";

export default function UsersPage() {
    const [userData, setUserData] = useState(null);

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

    const fetchData = async () => {
        try {
            const apiUrl = "https://reqres.in/api/users?page=2";
            const response = await fetch(apiUrl);

            if (!response.ok) {
                throw new Error("Failed to fetch data");
            }

            const data = await response.json();

            if (!data || !data.data || !Array.isArray(data.data)) {
                throw new Error("Invalid data format");
            }

            setUserData(data);
        } catch (error) {
            setUserData(null);
        }
    }

    return (
        <div>
            <h1>Users</h1>
            {userData && (
                <div>
                    {userData.data.map((user) => (
                        <div key={user.id}>
                            <p>ID: {user.id}</p>
                            <p>Email: {user.email}</p>
                            <p>First Name: {user.first_name}</p>
                            <p>Last Name: {user.last_name}</p>
                        </div>
                    ))}
                </div>
            )}
        </div>
    )
}

• Try this one; it should work. Also, don't forget to call this component : <UsersPage/>

• Also, I see your path is not correct. If it's not a typo, follow this structure: app/stocks/[ticker]/page.js