I have a database in MongoDB and one of the props in the document contains an array. I'm trying to map the collection in the client-side using React using this code:
<div>
<h2>Recipes</h2>
<ul>
{this.state.recipes.map(recipe =>
<li key={recipe._id}>
{recipe.title}<br/>{recipe.category}<br/>
{recipe.ingredients}<br/>{recipe.preparation}
</li>
)}
</ul>
</div>
ingredients prop is an array and I want to map it too. How can I do it?
Any help would be great, thanks!
Just map it the same way you do with recipes
<div>
<h2>Recipes</h2>
<ul>
{this.state.recipes.map(recipe =>
<li key={recipe._id}>
{recipe.title}<br/>
{recipe.category}<br/>
{recipe.ingredients.map(ingredient => (
<span>{ingredient}</span>
))}
<br/>{recipe.preparation}
</li>
)}
</ul>
</div>
just map it again
<div>
<h2>Recipes</h2>
<ul>
{this.state.recipes.map(recipe =>
<li key={recipe._id}>
{recipe.title}<br/>
{recipe.category}<br/>
{recipe.ingredients.map(k =>(
<span key={k._id}>{k}<span>
)<br/>
{recipe.preparation}
</li>
)}
</ul>
</div>
<div>
<h2>Recipes</h2>
<ul>
{this.state.recipes.map(recipe =>
<li key={recipe._id}>
{recipe.title}<br/>{recipe.category}<br/>
{ recipe.ingredients.map(ingredient =>
<span>{ingredient}</span>
)}
<br/>{recipe.preparation}
</li>
)}
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
You can also use .map() there by calling recipe.ingredients.map() as the following:
{this.state.recipes.map(recipe =>
<li key={recipe._id}>
{recipe.title}<br/>{recipe.category}<br/>
{
recipe.ingredients.map((elem, index) =>
<div key={index}>
{elem /* or maybe elem['your-property-name'] if it's not a string */}
</div>
)
}<br/>{recipe.preparation}
</li>
)}
Also don't forget to add key={index} there to avoid the warning based on Lists and Keys.
Related
I have this React code:
export default function Technologies({ technologies }) {
return (
<>
{ Object.keys(technologies).map((key, i) => (
<span>
<span className={styles.post}><h3 className={'bold300'}>{key}</h3></span>
<div className={styles.techList}>
<ul key={i}>
{ Object.keys(technologies[key]).map((key2, idx) => (
<li key={idx}>{key2}
{ technologies[key][key2].map(key3 => (
<span key={key3.name} className={styles.badge}><Image src={key3.name} width={key3.w} height={key3.h} /></span>
)) }
</li>
)) }
</ul>
</div>
</span>
)) }
</>
)
}
Here you can see nested iteration, and everywhere I use i or idx to create unique key for list, but still keep getting warning for this string:
...
<ul key={i}>
...
As I said, I know what this error means, and even know how to fix, but not in this case, I just don't know, where I should put key to prevent this warning. Thanks!
The key should be present on the root element. So, the first key should be on the span and not on the ul.
export default function Technologies({ technologies }) {
return (
<>
{Object.keys(technologies).map((key, i) => (
<span key={i}>
<span className={styles.post}>
<h3 className={"bold300"}>{key}</h3>
</span>
<div className={styles.techList}>
<ul>
{Object.keys(technologies[key]).map((key2, idx) => (
<li key={idx}>
{key2}
{technologies[key][key2].map((key3) => (
<span key={key3.name} className={styles.badge}>
<Image src={key3.name} width={key3.w} height={key3.h} />
</span>
))}
</li>
))}
</ul>
</div>
</span>
))}
</>
);
}
<div className='login'>
<p style={{paddingLeft: '30px'}}>login</p>
<ul>
{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.login}</li>)}
</ul>
</div>
<div className='type'>
<p style={{paddingLeft: '30px'}}>type</p>
<ul>
{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.type}</li>)}
</ul>
</div>
<div className='url'>
<p style={{paddingLeft: '30px'}}>url</p>
<ul>
{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.url}</li>)}
</ul>
</div>
This is Firtst code But I am trying to do duplicate codes through map(). Like this..
{['login', 'type', 'url'].map(value => {
return (
<div className={value}>
<p style={{paddingLeft: '30px'}}>{value}</p>
<ul>
{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.`${value}`}</li>)}
</ul>
</div>
)
})}
But I can't use First Parameter value in Second map() fetch.userData.map().
Any one know this problem??
Use user[value]
{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user[value]}</li>)}
I am trying to call to an arrow function inside jsx statement while using .map() js function:
<ul className="list-group col-10 ms-5">
{datoPaises.map((item) => (
<li className="list-group-item" key={item.id}>
{this.parseRegions(item)}
<span> Muertes nuevas: {item.today_new_deaths} </span>
<span>Muertes totales: {item.today_deaths}</span>
</li>
))}
</ul>
this.parseRegions(item) is returning TypeError: Cannot read property 'parseRegions' of undefined
which is not happening when just writing the item inside the jsx block
<ul className="list-group col-10 ms-5">
{datoPaises.map((item) => (
<li className="list-group-item" key={item.id}>
{item.id}
<span> Muertes nuevas: {item.today_new_deaths} </span>
<span>Muertes totales: {item.today_deaths}</span>
</li>
))}
</ul>
this one display all data correctly, the problem appears when trying to use the function.
I am working on a header component. Here is the code:
import style from '../../styles/header.css';
import '../../styles/globals.css';
export default function Header({data}){
const [showMe, setShowMe] = useState(false);
function toggle(){
console.log("toggle")
setShowMe(!showMe);
}
return(
<>
<div className="header">
<div className="web-header">
<div className="first-header">
<div className="info-strip">
<ul>
<li>
Contact Us
</li>
<li>
7 Day Returns
</li>
<li>
Track Order
</li>
<li>
Return Order
</li>
<li>
Survey
</li>
</ul>
</div>
<div className="right-block d-flex">
<div className="login">
<span className="image"></span>
<span className="text">Log In
<div className="account-box">
</div>
</span>
</div>
<div className="cart">
<span className="cart-image">
</span>
<span className="text">Cart</span>
</div>
</div>
</div>
<div className="second-header">
<div className="header-logo">
<img src="https://www.mirraw.com/assets/logo-red.png" />
</div>
<div className="search">
<input placeholder="Search Something.." />
<button></button>
</div>
</div>
<div className="third-header">
<div className="container-fluid">
<ul className="menu">
{data.menus.map((post, index) => {
return (
<li className="menu-list">
{post.title}
<div className="megabox">
<ul className="wrapper">
{post.menu_columns.map((subItems, sIndex) => {
return <li>
<span className="menu-link">
{subItems.title}
</span>
<ul className="category">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</div>
</li>)})}
</ul>
</div>
</div>
</div>
<div className="mobile-screen">
<div className="mobile-header">
<div className="mobile-menu">
<div className="menu-icon">
<div className="wrapper">
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<div className="right-card">
<img src="https://www.mirraw.com/assets/logo-red.png" />
<p className="app-install">
<span>Download app</span>
</p>
<div className="cart">
<span className="cart-image"></span>
{/* <span className="text">Cart</span> */}
</div>
</div>
<nav>
<ul>
<li className="menu-heading">
<span>Menu</span>
<span>
<label for="navigation">X</label>
</span>
</li>
{data.menus.map((post, index) => {
return (
<li className="menu-list">
{post.title} <span onClick={toggle}>+</span>
<ul style={{display: showMe?"block":"none"}} className="category-one">
{post.menu_columns.map((subItems, sIndex) => {
return <li>
{subItems.title}
<span>+</span>
<ul className="category-two">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</li>)})}
</ul>
</nav>
</div>
</div>
</div>
<div className="scroll-menu-list">
<ul className="mb-0">
{data.menus.map((post, index) => {
return (
<li className="menu-list">{post.title}</li>
)})}
</ul>
</div>
</div>
</div>
</div>
</>
)
}
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
const data = await res.json();
// Pass data to the page via props
return { props: { data } }
}
Code is working fine if I render this page only, but when I import this component in other component, it threw error:
Server Error
TypeError: Cannot read property 'menus' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
What could be the approach of getting value from the API for child component?
getServerSideProps can only be used within page components, which is why it works when you render this component as a page.
If you want to this to be a reusable component that can be called from other components and/or pages you'll need to pass the data you get at the page level (from getServerSideProps, for instance) down to it.
// pages/index.js
import Header from "../components/header"
export default function IndexPage({ data }) {
return (
<Header data={data} />
)
}
export async function getServerSideProps() {
const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
const data = await res.json();
return { props: { data } }
}
I have products in json format that are fetched and shown in the frontend. In my products.json there is an image url for each products, but only some have image urls in them, others are empty. When I am looping the data in react I always get error in my react app saying Cannot read property of null in the tag, how do I write a logic that only renders the image when there is an image source else just return an empty div?
<ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-product" key={items.id}>
<h3>{items.title}</h3>
<p>{items.description}</p>
<div className="price-box">
<p>from: {items.price} $</p>
</div>
<div>
{<img src={items.photo} alt=""/>}
{/* {console.log(items.photo.id)} */}
</div>
</li>
);
})}
</ul>
replace your
{<img src={items.photo} alt=""/>}
with
{items.photo && <img src={items.photo} alt=""/>}
it will only render img element when item.photo is not null.
You can set a condition. For example:
<ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-product" key={items.id}>
<h3>{items.title}</h3>
<p>{items.description}</p>
<div className="price-box">
<p>from: {items.price} $</p>
</div>
{items.photo
? <div>
{<img src={items.photo} alt=""/>}
{/* {console.log(items.photo.id)} */}
</div>
: <div></div>
</li>
);
})}
</ul>