React frontend variable is undefined within return

I'm fairly new to React and somewhat confused by why I can't access this variable I assume its a scope issue, do I need to pass this variable to the return in another way?
Exact error is: Line 47:16: 'filteredData' is not defined no-undef

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetch("http://localhost:8000/message")
      .then((res) => {
        if (!res.ok) {
          throw new Error("Request failed ${res.status}");
        }
        return res.json();
      })
      .then((data) => {
        setData(data.message);
      })
      .catch((error) => {
        setError(error);
      });
  }, []);
  // Filter the data to get specific values
  // const filteredName = data ? data.filter(item => item.name === 'name') : null;
  // const filteredPrice = data ? data.filter(item => item.price === 'price') : null;
  const FilteredData = ({ data }) => {
    const filteredData =
      data && Array.isArray(data)
        ? data.map((item) => ({
            name: item.name,
            symbol: item.symbol,
            price: item.quote && item.quote.USD && item.quote.USD.price,
          }))
        : [];
  };
  return (
    <div className="App">
      <h1>CoinBoy</h1>
      <p>
        Get the latest data from multiple trackers such as CoinMarketCap, ...
      </p>
      {error && <p>Error: {error.message}</p>}
      {!data ? (
        <p>Fetching Coins...</p>
      ) : (
        filteredData.map((item) => (
          <div key={item.symbol}>
            <h3>{item.name}</h3>
            <p>Symbol: {item.symbol}</p>
            <p>Price: {item.price}</p>
          </div>
        ))
      )}
    </div>
  );
}
export default App;

In your code, you define the FilteredData component, but you're not returning the filteredData variable from it. To access filteredData in your return statement, you need to update your code as follows:

import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch("http://localhost:8000/message")
.then((res) => {
if (!res.ok) {
throw new Error(`Request failed ${res.status}`);
}
return res.json();
})
.then((data) => {
setData(data.message);
})
.catch((error) => {
setError(error);
});
}, []);
const FilteredData = ({ data }) => {
const filteredData = data && Array.isArray(data)
? data.map((item) => ({
name: item.name,
symbol: item.symbol,
price: item.quote && item.quote.USD && item.quote.USD.price
}))
: [];
return (
<>
{filteredData.map((item) => (
<div key={item.symbol}>
<h3>{item.name}</h3>
<p>Symbol: {item.symbol}</p>
<p>Price: {item.price}</p>
</div>
))}
</>
);
};
return (
<div className="App">
<h1>CoinBoy</h1>
<p>Get the latest data from multiple trackers such as CoinMarketCap, ...</p>
{error && <p>Error: {error.message}</p>}
{!data ? (
<p>Fetching Coins...</p>
) : (
<FilteredData data={data} />
)}
</div>
);
}
export default App;

updated code, the filteredData variable is defined within the FilteredData component, and it is returned within the component's JSX. By passing the data prop to the FilteredData component, you can access it inside the component and perform the necessary filtering logic.