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>
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).
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
)}
</>
)
I'm wondering if it's possible to have an if statement inside an if statement in a return.
I am aware of the following syntax:
return (
<div>
{ myVar ? <Component/> : <AnotherComponent/> }
</div>
)
What I want is something like this:
return (
<div id="App">
{ loading ?
<Loading/>
:
userIsLoggedIn ?
<Redirect to="/login"/>
:
<Redirect to="/dashboard"/>
}
</div>
)
Is this possible? If not, how can I achieve this?
Actually this is a bad practice, avoid nested ternary... but your code will be like this:
return (
<div id="App">
{ loading ? <Loading/> : (userIsLoggedIn ? <Redirect to="/login"/> :<Redirect to="/dashboard"/>)}
</div>
);
I need either annualPlans or monthlyPlans to map it depending if isAnually is true or not. and what is the safest way to put in the price?
I have a toggle button by the way which switches between the annualPlans and monthlyPlans.
How do it do it?
Here's my code below
{isAnnually
? annualPlans
: monthlyPlans.map((p, index) => (
<Fragment key={index}>
<PlanCard
id={p.value}
current={p.current}
title={p.name}
price={`$ ${
p.annual_price ? p.annual_price : p.monthly_price
}`}
/>
</Fragment>
));
}
You'll need to wrap your ternary condition in parenthesis before you call .map().
{(isAnnually ? annualPlans : monthlyPlans).map((p, index) => (
<Fragment key={index}>
<PlanCard
id={p.value}
current={p.current}
title={p.name}
/>
</Fragment>
))}
As you can see in my code example below which is part of a render() block in a react component, I am trying to render the value of the variable "folder" in the outer loop. Unfortunately, the code section
<div>{folder}</div>
seems to be ignored. Can anyone help me in finding the right syntax that outputs the current folder value from the outer loop?
{
folders.map((folder,_index1) => {
<div>{folder}</div>
return (
items.map((item, index) => {
return (
<div>
{(folder === item.folder) ?
<Draggable
key={item.id}
draggableId={item.id}
index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{ ...provided.draggableProps }
{ ...provided.dragHandleProps }
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}>
<div>
{item.content}
</div>
</div>
)}
</Draggable>
: null
}
</div>
)})
)})
}
Following Zydnar's comment above:
This is what it should look like:
{
folders.map((folder,_index1) => {
return (
<> // or <React.Fragment> with the corresponding closing tag
<div>{folder}</div> // this has to be part of what is returned
items.map((item, index) => {
return (
<div>
{(folder === item.folder) ?
...
</>
)})
)})
}