Develop Reference

if statement in react.Js with map function

my code got an map function that show item in a list :item that showing in the site
I need to write an if statement that olny show the item that same as the date above
code in react for the map function:
function Feed(props) {
console.table(props.data);
const number="";
return (
<>
{
props.data.map(item=> (
<>
<div className="taskcolorback-div" />
<button className="taskcolor-button" />
<input className="tasktext-b" defaultValue={item.fields.Title}></input>
<button className="taskwhite-button" />
<b className="timeinline">{item.fields.Hours}Hr</b>
<img className="vector-icon" alt="" src="icons8-chevron-right-64.png" />
</>
))
}
</>
)
}

// if your item has a date property and it's a string.
const component = /* the component you want to render */
item.fields.date === yourDate ? component : <p> write some error handling </p>
// at least you need some date data

You can use ternary operator instead of if statement.
return (
<>
{props.data.map(item =>
item.display === true ? (
<div>{/*Your component Here*/}</div>
) : null
)}
</>
)

Each child in a list should have a unique "key" prop for subchild DOM elements

I am trying to map a return statement with multiple child components and getting ESLint error
console.error
Warning: Each child in a list should have a unique "key" prop.
This is my React Code:
const EmployeeDetails = ({ employeeid }) => {
return (
<div>
<strong>Employee Overview Details</strong>
</div>
<div className="flex-container" key="test">
{employeeOverviewDetails.map((detail, index) => {
return (
<>
{detail.heading === 'Employee ID' && (
<div
className="indiviual-flex"
key={index}
>
<small key={detail.heading}>
{detail.heading}
</small>
<br />
<strong key={detail.value}>
{employeeid}
</strong>
</div>
)}
{detail.heading !== 'Employee ID' && (
<div
className="indiviual-flex"
key={detail.heading}
>
<small>{detail.heading}</small>
<br />
<strong>{detail.value}</strong>
</div>
)}
</>
)
})}
</div>
)
}
I am passing key for every element and yet ESLint keeps warning about unique "key" prop

You are missing a fragment:
const EmployeeDetails = ({ employeeid }) => {
return (
<>
<div>
<strong>Employee Overview Details</strong>
</div>
<div className="flex-container" key="test">
{employeeOverviewDetails.map((detail, index) => {
return (
<>
{detail.heading === "Employee ID" && (
<div className="indiviual-flex" key={index}>
<small key={detail.heading}>{detail.heading}</small>
<br />
<strong key={detail.value}>{employeeid}</strong>
</div>
)}
{detail.heading !== "Employee ID" && (
<div className="indiviual-flex" key={detail.heading}>
<small>{detail.heading}</small>
<br />
<strong>{detail.value}</strong>
</div>
)}
</>
);
})}
</div>
</>
);
};
You cannot have 2 elements side by side in React, either use this syntax
<> </>
to wrap around the elements which are side by side or use you can import Fragment from React like this:
import { Fragment } from "react";
And then wrap the elements which are side by side with Fragment like this:
<Fragment></Fragment>
or if u don't want to import Fragment you can also use React.Fragment. but you need to import react for this.

looping over two arrays in react

So i have two map() blocks and 1st block is part of 2nd one, but i dont want 1st map() to affect 2nd one. How to accomplish that?
I'm new in JS and React. Thank you!
const Ciklogen = () => {
links.map((h) => {
console.log(h.heading, h.text, h.url)
return (
<>
<h3 className='heading'>{h.heading}</h3>
<p className='kratak-opis'>{h.text}</p>
<a href={h.url}>
<button className='read-more'>Read more</button>
</a>
</>
)
})
return (
<>
<Navigation logo={logo} links={links} />
{cssClass.map((style) => {
return (
<div key={style.id} className={`bg-image ${style.name}`}>
<div className='bg-text'>{ **1st block should be here**} </div>
</div>
)
})}
</>
)
}
export default Ciklogen

How to style nested components in react?

I coded a table of content using nested components. Each component is a list of headers.
I want to style each component with an indentation effect (margin-left: "20px") to differentiate each level of nesting.
Example:
<Parent>
-->indent <Child/>
-->indent <Child2/>
-->indent (etc.)
</Parent>
Any idea of how to do it dynamically?
Here's my code:
import React from "react";
const TocContent = ({ props }) => {
return (
<div className="TOC">
{props.TOC.map((header) => (
<HeaderList key={header.objectId} header={header} props={props} />
))}
</div>
);
};
const HeaderList = ({ header, props }) => {
return (
<div>
<li
onMouseDown={(e) => e.stopPropagation()}
className="listing"
style={{}}
onClick={(e) =>
props.handleHeaderClick(
header.level,
header.treepath,
header.containsLaw,
header.sections,
header.secNum,
header.objectId,
header.id,
e.stopPropagation(),
)
}
>
{header._id}
</li>
{/* // if savedIndex === CurrentParent Index */}
{props.headerIndex === header.objectId &&
props.headers2.map((node2) => (
<HeaderList key={node2.objectId} header={node2} props={props} />
))}
{props.headerIndex2 === header.objectId &&
props.headers3.map((node3) => (
<HeaderList key={node3.objectId} header={node3} props={props} />
))}
{props.headerIndex3 === header.objectId &&
props.headers4.map((node4) => (
<HeaderList header={node4} key={node4.objectId} props={props} />
))}
</div>
);
};
export default TocContent;

Put the margin (or padding) on the element that contains both the HeaderList's main content and the sub-HeaderList components (instead of just the main content as you have now). Specifically this would be the div that wraps all other returned content in the HeaderList component. The margins will stack up and each nested header list will be more indented than the parent.
For example (just HTML & CSS):
.header-list {
margin-left: 20px;
}
<div class="header-list">
First Element
<div class="header-list">
Second Element
<div class="header-list">
Third Element
</div>
</div>
</div>

Is there a better way to display content depending on the route?

There is a component responsible for rendering items in the e-commerce. I want to have a single component, which will render different content depending on the category clicked by user.
My solution looks something like this:
function ProductsPage({collections}) {
return (
<Route path="/products/type_one" render={() =>
<div>
<h1>Type One</h1>
<div className="products">
{
collections.category.typeOne.items.map((item) => {
return (
<ProductCard key={item.id} item={item} />
)
})
}
</div>
</div>
}/>
<Route path="/products/type_two" render={() =>
<div>
<h1>Type Two</h1>
<div className="products">
{
collections.category.typeTwo.items.map((item) => {
return (
<ProductCard key={item.id} item={item} />
)
})
}
</div>
</div>
}/>
)
}
So far I have only four subcategories, that`s why it looks pretty harmless. But if there are dozens of them, then the component code will be clogged with an endless copy-paste. Is there a more elegant method for solving the problem?

You can use route props to dynamically get the category parameter from the route URL and display the items using so. Your code might look similar to this:
<Route path="/products/:category" component={Category} />
function Category(props) {
const category = collections.category[props.match.params.category]
if (category) {
return (
<div>
<h1>category.name</h1>
<div className="products">
{
category.items.map((item) => {
return (
<ProductCard key={item.id} item={item} />
)
})
}
</div>
</div>
)
} else {
// category does not exist
}
}