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
)}
</>
)

React Array not showing data in .map despite showing in console.log

I'm pulling in data from a GraphQL query and mapping through the array in my React app, I can see if I console log the array that all the data is there as requested but when I map through it, I just get nothing showing on my screen, no error, it doesn't generate any HTML elements or anything despite being similar to every other array map I've done so far.
My the mapping part of my component is as follows:
const CareerFeed = React.forwardRef((props, ref) => {
return (
<CareerFeedWrapper ref={ref}>
<Container width={14}>
{console.log(props.array)}
{props.array.map((item, index) => {
<CareerItem key={index}>
{item.title}
</CareerItem>
})}
</Container>
</CareerFeedWrapper>
)
})

You are not returning anything from the .map function: when you use curly brackets, the arrow function no longer implicitly returns. You will need to use the return statement:
{props.array.map((item, index) => {
return (
<CareerItem key={index}>
{item.title}
</CareerItem>
);
})}
Alternatively, ditch the curly brackets and wrap the returned JSX in parenthesis to take advantage of explicit returns:
{props.array.map((item, index) => (
<CareerItem key={index}>
{item.title}
</CareerItem>
))}

Looks like a missing return statement on the map. This means its actually iterating through the array and replacing each one with a null object. Try this:
return (
<CareerFeedWrapper ref={ref}>
<Container width={14}>
{console.log(props.array)}
{props.array.map((item, index) => {
return (<CareerItem key={index}> //added return
{item.title}
</CareerItem>) //added closing parentheses for return
})}
</Container>
</CareerFeedWrapper>
)
})

Is it possible to have an if inside an if in return?

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>
);

Displaying Data Based on Ternary Operator in React

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>
))}

unexpected token in case of conditional rendering

I am getting this unexpected token error in conditional rendering .However it looks fine to me but couldn't figure out what is going wrong .
{isAdd===true?
countries.map(item=>{
return(
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
);
}))
:
return (
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>
);
}

Simply add return on the outside of the component (Assuming this is at the top of the render() function):
return isAdd===true ?
countries.map(item=> (
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
))
:
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>;
If it's nested in the component, simply just include { brackets to treat it like a variable:
render() {
return (
<div>
{isAdd===true ?
countries.map(item=> (
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
))
:
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>
}
</div>
);
}

There is an issue with your return statement.
Try this...
var returnItem;
{isAdd===true?
countries.map(item => {
returnItem = <MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>;
})
:
returnItem =<MenuItem key={101} value={101}>{'Country1'}</MenuItem>;
}
return returnItem;