Trying to fetch a specific record in JSON file - json

Question

I am trying to fetch just one record from my JSON file, the JSON file is in the public folder
I set up a codesandbox https://codesandbox.io/live/7gu09fv
What is happening now is that it just returns the first record from the JSON and isn't matching the id to pageId
import React, { useState, useEffect } from 'react';
import {
useLocation
} from "react-router-dom";
function FetchContent( { pageId } ) {
const [page, setPage] = useState([]);
useEffect(() => {
fetch("pages.json" ,{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(res => res.json())
.then(json =>{
setPage(json)
}
)
}, []);
const found = page.find(id => id = { pageId });
if (!found) return <div />;
return (
<>
<h1 key={found.id}>{found.title.rendered}: {found.id} : {pageId}</h1>
</>
);
}
function Page() {
const { state: { pageId } } = useLocation();
return (
<div className="container-fluid">
<FetchContent pageId={pageId} />
</div>
);
}
export default Page;

Answer 1

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
function FetchContent({ pageId }) {
const [foundItem, setFoundItem] = useState();
useEffect(() => {
fetch("pages.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json"
}
})
.then((res) => res.json())
.then((json) => {
const found = json.find(({id}) => (id === pageId));
setFoundItem(found);
});
}, [pageId]);
if (!foundItem) return <div />;
return (
<>
<h1 key={foundItem.id}>
{foundItem.title && foundItem.title.rendered ? foundItem.title.rendered: ''}: {foundItem.id} : {pageId}
</h1>
</>
);
}
function Page() {
const location = useLocation();
const [pageId, setPageId] = useState(null);
useEffect(()=> {
if(location.state){
setPageId(parseInt(location.state.pageId, 10));
}
}, [location]);
return (
<div className="container-fluid">
<FetchContent pageId={pageId} />
</div>
);
}
export default Page;

Answer 2

Try this:
const found = page.find(obj => obj.id === pageId);