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
)}
</>
)
Related
I have a react return like so:
return (
<div className="App">
{data && (
<div>
{data.map((d) => {
return (
<div key={d.id}>
<div>{d.string}</div>
<div> {d.array.map((el) => {
<div>{el}</div>
})}
</div>
</div>
);
</div>
)}
</div>
);
Each {el} doesn't render but the array exists, if I try and render {d.array[0]} the first index of the array is rendered, so I'm not the issue. I don't get an error and nothing breaks. Is it a react issue or a javascript issue, or is my syntax wrong.
You need to add a key to each children of your second map so React knows each one is different:
return (
<div className="App">
{data && (
<div>
{data.map((d) => {
return (
<div key={d.id}>
<div>{d.string}</div>
<div> {d.array.map((el, index) => {
return <div key={index}>{el}</div>
})}
</div>
</div>
);
</div>
)}
</div>
);
before the "=>" of second map, will have use "()" and not "{}", because all that be in {is js}, and in (jsx).
I want to render a component based on a variable being true or false. At the moment the condition comes up as true but the component isn't rendering at all.
Here is my code:
<div className={styles.container}>
{array.map(item => {
router.query.slug != item ? <Component /> : null;
})}
</div>
My console is returning true for the condition router.query.slug != item so what am I missing?
Thanks
You are missing to return the component from map function.
Here is the example that will match your problem:
Solution 1
<div className={styles.container}>
{array.map(item => {
return router.query.slug != item ? <Component /> : null;
})}
</div>
Solution 2 with single line
<div className={styles.container}>
{array.map(item => router.query.slug != item ? <Component /> : null)}
</div>
You can read about map function in here.
If you use the block syntax, you need to specify the return keyword. Learn more about arrow-function
Try this way.
Example:
<div className={styles.container}>
{array.map(item => {
return (router.query.slug != item ? <Component /> : null)
})}
</div>
using a ternary statement to render different JSX depending on shouldRenderPlanA property (which resolves true or false). Issue however is that an error appears at the shouldRenderPlanA ternary check with the following:
"Unexpected token ?, expected the token :"
Can anyone explain where I might be going wrong? TIA
return (
<>
{options.map(option)}
<StyledRow>
{variousOptions.map((opt) => (
{shouldRenderPlanA ? (
<StyledLabelOptionOne
variousProps={variousProps}
/>
) : (
<StyledLabelOptionTwo
variousProps={variousProps}
/>
)}
))}
</StyledRow>
</>
);
My suspicion is that it's something to do with the check happening inside the map?
You cannot use nested braces {} in JSX, remove the inner ones and it will work:
return (
<>
{options.map(option)}
<StyledRow>
{variousOptions.map((opt) => shouldRenderPlanA ? (
<StyledLabelOptionOne
variousProps={variousProps}
/>
) : (
<StyledLabelOptionTwo
variousProps={variousProps}
/>
))}
</StyledRow>
</>
);
Here's the problem.
(
{shouldRenderPlanA ? (
You can't expect to return an object, instead
(shouldRenderPlanA ?
Or try to write something simple at the beginning , ex. flag?1:0 to get it working before plugging other things :)
You have an error because you didn't return a value inside the map
Maybe this can help you
return (
<>
{options.map(option)}
<StyledRow>
{variousOptions.map((opt) => {
return shouldRenderPlanA ? (
<StyledLabelOptionOne
variousProps={variousProps}
/>
) : (
<StyledLabelOptionTwo
variousProps={variousProps}
/>
}
))}
</StyledRow>
</>
);
You muset remove the parentheses, and return the element
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.
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