Conditional rendering of React component if json key exists - reactjs

Question

I am trying to conditionally render a component with bad results. I have read many tutorials and Stack Overflow questions but I can't get this work. Could you help me?
The conditional component is a data visualization geographical map which should be rendered only when a fetched json file has "code" key. In other words I have dozens of jsons and some of them include geo map information but not all. I have been trying boolean and different kind of ternary operators in jsx but every time when mapless item is clicked in sidebar React tries to render Map child component and gives an error that "code" (key) is undefined. What could be reason for that? Below is my code:
App.js
function App() {
const [files, setFiles] = useState([]);
const [items, setItems] = useState([]);
const [product_id, setProduct_id] = useState(13);
const [mapCode, setMapcode] = useState(0);
useEffect(() => {
fetch("/sidebar")
.then((res) => res.json())
.then((data) => {
setItems(data);
});
}, []);
useEffect(() => {
fetch(`/data/${product_id}`)
.then((res) => res.json())
.then((data) => {
setFiles(data);
if ("code" in data[0]) setMapcode(1);
else setMapcode(0);
console.log(mapCode);
});
}, [product_id]);
function HandleSelection(e) {
setProduct_id(e);
}
Inside useEffect if fetched product data includes "code" key I change mapCode every time an item (product) is clicked in sidebar. console.log(mapCode) gives right kind of results.
Below is the essential code inside return() of App.js. There are couple of ways I have tried to get the conditional rendering work.
<div className="col-6">
<Files files={files} />
</div>
<div className="col-3">
{/*Boolean(mapCode) && <Map files={files} />*/}
{/*mapCode === true && <Map files={files} />*/}
mapCode === true ? <Map files={files} /> : <div>No map</div>
</div>
I have been wondering if useEffect is the right place to use setMapcode(0) and setMapcode(1)?

Answer 1

First you should set a boolean value to isMapCode instead of a number:
const [isMapCode, setIsMapcode] = useState(false);
useEffect(() => {
fetch(`/data/${product_id}`)
.then((res) => res.json())
.then((data) => {
setFiles(data);
setIsMapcode(data[0].code !== undefined);
});
}, [product_id]);
Therefore you should check its value inside a scope ({}):
<div className="col-3">
{isMapCode ? <Map files={files} /> : <div>No map</div>}
</div>
Notice that you don't need another state for it, you can check your files state:
const isMapCodeAvailable = data[0].code !== undefined;
<div className="col-3">
{isMapCodeAvailable ? <Map files={files} /> : <div>No map</div>}
</div>