'How to render specific array item to a different screen? React Axios
How can I display information of a specific array item in the different screen? The data is displayed from the backend on HomeScreen and upon clicking on one of the products, the ProductScreen should display information related to that specific item. There are 6 arrays in data.js. I could manage to do it when loading without axios, but now I'm stuck.
Here is the HomeScreen:
import Product from '../components/Product';
import axios from 'axios';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { useSelector } from 'react-redux';
export default function HomeScreen() {
const [tshirts, setTshirts] = useState([]);
const [hoodies, setHoodies] = useState([]);
const [cases, setCases] = useState([]);
const [pins, setPins] = useState([]);
const [posters, setPosters] = useState([]);
const [mugs, setMugs] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/tshirts');
setLoading(false);
setTshirts(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/hoodies');
setLoading(false);
setHoodies(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/cases');
setLoading(false);
setCases(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/pins');
setLoading(false);
setPins(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/posters');
setLoading(false);
setPosters(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const { data } = await axios.get('/api/mugs');
setLoading(false);
setMugs(data);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchData();
}, []);
return (
<div>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<><section className="sec1">
<a href="#" className='catlinks'>All Designs</a>
<a href="#" className='catlinks'>T-Shirts</a>
<a href="#" className='catlinks'>Hoodies</a>
<a href="#" className='catlinks'>Phone Cases</a>
<a href="#" className='catlinks'>Stickers</a>
<a href="#" className='catlinks'>Posters</a>
<a href="#" className='catlinks'>Home Goods</a>
</section><section id="banner">
<div className="banner-container">
<figure className="slide">
<img src='https://i.imgur.com/w8VkWlg.jpg' />
</figure>
</div>
</section><section className="products">
<span className="productstitle">Featured T-Shirts</span>
<a href={`/category/tshirts`} className="browseall">All designs ></a>
<table className="maintable">
{tshirts.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
<p className='featuredtext'><span className="productstitle">Featured Hoodies</span>
<a href={`/category/hoodies`} className="browseall">All designs ></a></p>
{hoodies.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
<p className='featuredtext'><span className="productstitle">Featured Phone Cases</span>
<a href={`/category/cases`} className="browseall">All designs ></a></p>
{cases.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
<p className='featuredtext'><span className="productstitle">Featured Pins</span>
<a href={`/category/stickers`} className="browseall">All designs ></a></p>
{pins.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
<p className='featuredtext'><span className="productstitle">Featured Posters</span>
<a href={`/category/posters`} className="browseall">All designs ></a></p>
{posters.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
<p className='featuredtext'><span className="productstitle">Featured Mugs</span>
<a href={`/category/mugs`} className="browseall">All designs ></a></p>
{mugs.slice(0, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
</table>
</section></>
)}
</div>
);
}
Here is ProductScreen:
import React, { useEffect, useState } from 'react'
// import data from '../data';
import Product from '../components/Product';
import axios from 'axios';
export default function ProductScreen(props) {
const [tshirts, setTshirts] = useState([]);
const [hoodies, setHoodies] = useState([]);
const [casess, setCases] = useState([]);
const [pins, setPins] = useState([]);
const [posters, setPosters] = useState([]);
const [mugs, setMugs] = useState([]);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/tshirts');
setTshirts(data);
}
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/hoodies');
setHoodies(data);
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/cases');
setCases(data);
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/pins');
setPins(data);
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/posters');
setPosters(data);
};
fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/mugs');
setMugs(data);
}
fetchData();
}, []);
//Return T-Shirt info
// if(tshirts){
if (!hoodies && !casess && !pins && !posters && !mugs) {
return (
<>
<div className='productpageinfocontainer'>
<div className='leftside'>
<img className='largeimg' src={tshirts.image} alt={tshirts.name} ></img>
</div>
<div className='rightside'>
<h1 className='prodtitle'>{tshirts.name}</h1>
<p className='prodcategory'>{tshirts.category}</p>
<p className='prodspectitle'><span className="designerspan">Designer: </span><a href={`/user/${tshirts.designer}`} className="proddesigner">{tshirts.designer}</a></p>
<p className='prodspectitle'>Sizes:</p>
<div className='sizes-container'>
<div className='size-tangle1' tabindex="2">S</div>
<div className='size-tangle' tabindex="2">M</div>
<div className='size-tangle' tabindex="2">L</div>
<div className='size-tangle' tabindex="2">XL</div>
</div>
<div className='sizes-container2'>
<div className='size-tangle1' tabindex="2">2XL</div>
<div className='size-tangle' tabindex="2">3XL</div>
<div className='size-tangle' tabindex="2">4XL</div>
<div className='size-tangle' tabindex="2">5XL</div>
</div>
{/* Stock check */}
<p className='prodspectitle'>Availability: {tshirts.countInStock > 0 ?
(<span className='instock'>In Stock</span>) :
(<span className='outofstock'>Out of Stock</span>)}
{tshirts.countInStock > 0 ?
(<span className='stockcount'>{tshirts.countInStock}<span className='availabletext'> in stock</span></span>) :
(<></>)}
</p>
{/* Stock check end */}
<p className='discountedprodprice'>${(tshirts.price * .75).toFixed(2)}<sup className='discountamount'>25% OFF</sup><span className='prodprice'> ${tshirts.price}</span></p>
{tshirts.countInStock > 0 ? (<button className='add-to-cart' tabindex="3">Add to cart</button>) : (<button className='add-to-cart-outofstock' tabindex="3">Add to cart</button>)}
{tshirts.countInStock > 0 ? (<></>) :
(<p className='checkotherstext'>
Hey! Seems this product is out of stock. But don't worry, we have other <a href="/category/tshirts" className='coolstufflink'>cool stuff</a> to check out!</p>)}
</div>
</div>
{/* FEATURED PRODUCTS BELOW V */}
<section className="products">
<span className="productstitle">More Featured Designs</span>
<a href={`/category/tshirts`} className="browseall">All designs ></a>
<table className="maintable">
{tshirts.slice(3, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
{hoodies.slice(4, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
{pins.slice(4, 6).map((product) => (
<Product key={product._id} product={product}></Product>
))}
{posters.slice(3, 4).map((product) => (
<Product key={product._id} product={product}></Product>
))}
</table>
</section>
</>
)
}
return (
<>
<div>Ooops! Product not found :(</div>
</>
)
};
Here is one sample array from data.js:
const data = {
tshirts: [
{
_id:'1',
name:'Electricity Will Kill You Kids T-Shirt',
category:'T-shirt',
image:'https://res.cloudinary.com/teepublic/image/private/s--H_2r7f_c--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,w_470/c_crop,g_north_west,h_626,w_470,x_0,y_0/g_north_west,u_upload:v1462829015:production:blanks:mtl53ofohwq5goqjo9ke,x_-395,y_-325/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1636700721/production/designs/25517406_0.jpg',
price:12.99,
designer:'mistergongs',
description:'TestDescription',
countInStock: 10,
},
{
_id:'2',
name:'Minecraft Impossible River T-Shirt',
category:'T-shirt',
image:'https://res.cloudinary.com/teepublic/image/private/s--fdI7fd6k--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,w_409/c_crop,g_north_west,h_626,w_470,x_-31,y_-26/g_north_west,u_upload:v1571669491:production:blanks:wrrzmmnvfbf1nk8hcfhh,x_-426,y_-351/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1596269139/production/designs/12694562_0.jpg',
price:9.99,
designer:'Ultraluxe',
description:'TestDescription',
countInStock: 0,
},
{
_id:'3',
name:'Kevin meow T-Shirt',
category:'T-shirt',
image:'https://res.cloudinary.com/teepublic/image/private/s--uTQUIDO4--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,w_470/c_crop,g_north_west,h_626,w_470,x_0,y_0/g_north_west,u_upload:v1462829015:production:blanks:mtl53ofohwq5goqjo9ke,x_-395,y_-325/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1636430789/production/designs/25444384_0.jpg',
price:10.99,
designer:'Vanessa Stockard',
description:'TestDescription',
countInStock: 12,
},
{
_id:'4',
name:'Lobster T-Shirt',
category:'T-shirt',
image:'https://res.cloudinary.com/teepublic/image/private/s--vHtGywzR--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,h_551/c_crop,g_north_west,h_626,w_470,x_-38,y_-14/g_north_west,u_upload:v1462829017:production:blanks:qe3008lhp5hquxmwp4a0,x_-433,y_-339/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1531561219/production/designs/2889826_0.jpg',
price:9.99,
designer:'Hazeman',
description:'TestDescription',
countInStock: 10,
},
{
_id:'5',
name:'Madonna Original 80s Vintage Style Design T-Shirt',
category:'T-shirt',
image:'https://res.cloudinary.com/teepublic/image/private/s--q39Pq4ge--/t_Resized%20Artwork/c_crop,x_10,y_10/c_fit,w_470/c_crop,g_north_west,h_626,w_470,x_0,y_0/g_north_west,u_upload:v1462829024:production:blanks:a59x1cgomgu5lprfjlmi,x_-395,y_-325/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1624368159/production/designs/22678281_0.jpg',
price:10.99,
designer:'DankFutura',
description:'TestDescription',
countInStock: 10,
},
],
};
export default data;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|