React, availableForSale: true to display Text when true - reactjs

Question

I am using Shopify as my backend and react as my frontend, and when the product.availableforsale is true I want it to print out in stock. Here is the code on my product page.
I have commented on the code where the {product.availableForSale} is in the product page component.
import React, { useEffect, useContext, useState } from "react";
import { useParams } from "react-router-dom";
import { ShopContext } from "../../context/shopContext";
import { Text, Div, Button, Row, Col, Container, Image } from "atomize";
import { Link } from "react-router-dom";
import "./ProductPage.css";
import { Spinner } from 'react-bootstrap';
//Res
// const theme = {
// grid: {
// colCount: 8,
// gutterWidth: 0
// }
// };
const ProductPage = () => {
let { id } = useParams();
const { fetchProductWithId, addItemToCheckout, product, client } = useContext(
ShopContext
);
//Fav
const [favoriteText, setFavoriteText] = useState("Add to Favorite");
//Variants
const [sizeIndex, setSizeIndex] = useState('');
const [posterIndex, setPosterIndex] = useState('');
useEffect(() => {
fetchProductWithId(id);
return () => {};
}, [fetchProductWithId, id]);
if (!product.title) return <div className="prod-spinner-container"><Spinner animation="border" variant="primary" /></div>
//Variants
const selectedVariant = client.product.helpers.variantForOptions(product, {
Size: sizeIndex || product.options[0].values[0].value,
Poster: posterIndex || product.options[1].values[0].value
});
return (
<Container>
<div className={"row"} >
<Div className="prod-img" p="1.5rem">
<Image src={product.images[0].src} w="20rem" p="2rem"/>
</Div>
<div className="prod-size col-12 col-sm-6 " pos="Center" key={product.id}>
<Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
{product.title}
</Text>
<Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
{/* Print Out text? */}
{product.availableForSale}
{product.vendor}
</Text>
{/* Selected variant will allow the price to change due to frame size etc */}
<Text className="cost-txt" tag="h3" textColor="white" m={{ y: "2rem" }} textWeight="100">
Price € {selectedVariant?.price} Excl Shipping
</Text>
{/* Poster size */}
<Text>Size (inc)</Text>
<select className="custom-select" value={posterIndex} onChange={e => setPosterIndex(e.target.value)} >
{product.options[1].values.map((item, index) => (
<option value={item.value}>{item.value}</option>
))
}
</select>
<Text>Frame</Text>
<select className="custom-select" value={sizeIndex} onChange={e => setSizeIndex(e.target.value)} >
{product.options[0].values.map((item, index) => (
<option value={item.value}>{item.value}</option>
))
}
</select>
<Button
rounded="lg"
shadow="3"
bg="black500"
m={{ y: "2rem" }}
onClick={() => addItemToCheckout(selectedVariant?.id, 1)}
>
Add to Cart
</Button>
<Button rounded="lg"
shadow="3"
bg="black500"
m={{ y: "2rem" }}
onClick={() => {
// console.log(product);
let favorites = JSON.parse(localStorage.getItem('favorites') || "[]");
const productExists = favorites.find(favorite => favorite.id === product.id);
if(productExists) {
favorites = favorites.filter(favorite => favorite.id !== product.id);
setFavoriteText("Add to Favorite")
localStorage.setItem('favorites', JSON.stringify(favorites));
} else {
favorites = [...favorites, product];
setFavoriteText("Remove from Favorite");
localStorage.setItem('favorites', JSON.stringify(favorites));
}
}}>
{/* <HeartIcon title="Add to Favourites" style={{height: '25px', width: '25px', backgroundColor: "#fff", color: "red" }} /> */}
{favoriteText}
</Button>
</div>
</div>
</Container>
);
};
export default ProductPage;
Any help would be greatly appreciated thanks. Please let me know if more code is needed thanks

Answer 1

If you want only one condition to show Out in Stock then use this
{product.availableForSale &&
<Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
{/* Print Out text? */}
{product.vendor}
</Text>
}
Or
{product.availableForSale ?
<Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
{/* Print Out text? */}
{product.vendor}
</Text>
:<div>Available</div>
}

Answer 2

You can create another state to track the download from the server
[isLoading, setIsLoading] = useState(true)
and when displaying data, look at this state
{
!isLoading ? (
<Text
className="title-txt"
tag="h1"
textColor="white"
textWeight="500"
m={{ y: "2rem" }}
>
{/* Print Out text? */}
{product.vendor}
</Text>
) : (
<Loader />
);
}