GOAL: Don't show Navigation component when the pathname includes either /create-page or add-block
Currently, the Navigation shows on both pages
<Route
path={[
"/affiliate-code",
"/dashboard",
"/editor",
"/locked",
"/saved",
"/notifications",
"/:id",
"/",
]}
component={() =>
window.location.pathname != ("/create-page" || "/add-block") && (
<Navigation
key={window.location.pathname}
newNotification={newNotification}
/>
)
}
/>
You cannot use an OR operator like so, you need to compare each value in the eval statement. If you want 1 statement I would suggest something like this:
!["/create-page","/add-block"].includes(window.location.pathname) && (
...
)
Change window.location.pathname != ("/create-page" || "/add-block")
to
window.location.pathname != "/create-page" && window.location.pathname != "/add-block"
The first one will always end up to be window.location.path != "/create-page" because string is a truthy value. But still the case of /create-page should have passed. Maybe the string isn't exact so you can use .includes for the purpose.
Related
I have working react-native code as sample below, I plan to refactor for readable reason, basically I need to check if state.room has content then return Text with then content of field
return (
{ state.room ?
<Text>{state.room.name}</Text>
: null }
{ state.room ?
<Text>{state.room.address}</Text>
: null }
);
You can use { state.room && <Text>{state.room.name}</Text> } instead.
You can simply check that state.room is truthy before you are trying to touch it once before the return statement and then assume it is fine.
if (!state.room) {
return null;
}
return (
<React.Fragment>
<Text>{state.room}</Text>
<Text>{state.room.address}</Text>
</React.Fragment>
)
You can just simply check write as
return state.room && (
<>
<Text>{state.room.name}</Text>
<Text>{state.room.address}</Text>
</>
)
If fragment shorthand is not supported, you can write as React.Fragment instead of <>.
It will return only render the markup if state.room is not falsy.
i want to render the jsx based on a condition using ternary operation in react.
What i am trying to do?
i have the code like below that works perfect.
return (
{this.has_rendered() && this.items_loaded()
? <ChildComponent/>
: <ChildComponent
on_prev={null}/>}
)
Now i want to check for other condition if its !current_user then i want to pass another prop named "on_next" to ChildComponent.
{this.has_rendered() && this.items_loaded() && !current_user &&
<ChildComponent/>}
{!this.has_rendered() && !this.items_loaded() && !current_user &&
<ChildComponent on_prev={null}/>}
{this.has_rendered() && this.itemss_loaded() && current_user &&
<ChildComponent
on_next={somevalue}/>}
{!this.has_rendered() && !this.items_loaded() && current_user &&
<NavigationContent
on_prev={null}
on_next={somevalue}/>}
The above code works but as you see there is repetition of code. how can i fix this with ternary operator. could someone help me with this.
thanks.
Nested ternary is a bad idea.
You should use variables in this case
let component = null;
if (this.has_rendered() && this.items_loaded()) {
component = current_user? <ChildComponent/> : <ChildComponent on_prev={null}/>
} else {
component = ...
}
If on_prev and on_next attributes can have values all the time, consider this approch:
return (
{ this.has_rendered() &&
<ChildComponent
on_prev={this.items_loaded() ? somevalue : null }
on_next={current_user ? someanothervalue : null} />
}
)
below is a inline if with logical && operator that renders a component if this.state.isHidden is false.
<div>{!this.state.isHidden && <ShowThisComponent /> }</div>
The above line works as expected. My problem is that I cannot figure out how to add a second condition to be met (e.g var1 === var2) to the above line. So that if both return true, the component gets displayed. How can I do this? thanks
I've looked at the documentation (https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical-ampamp-operator) could not find an answer
This is how the operator works:
{<any boolean statement> && <Component-to-be-displayed />}.
-or-
{(<any boolean statement>) && <Component-to-be-displayed />} ... it's always a good idea to use parentheses when analysing boolean statements
In your case it would look something like this :
(!this.state.isHidden && var1 === var2) && <Component-to-be-displayed />
so think of the operator like this:
if condition is true && render component
You can also perform an if-statement:
{(<any boolean statement>) ?
<Component-to-be-displayed-if-true />
:
<Component-to-be-displayed-if-false />
}
you can think of this operator like this:
if condition is true ? render component A : else render component B
{ (!this.state.isHidden && var1 === var2) && <ShowThisComponent /> }
{ !this.state.isHidden && secondCondition && <ShowThisComponent /> }
I've been struggeling with this basic stuff for a while now, but I cant seem to get it to work.
I'm getting data from our backend and if there're any deliveries objects it will be displayed with this:
<Expandable>
<ObjectDisplay
key={id}
parentDocumentId={id}
schema={schema[this.props.schema.collectionName]}
value={this.props.collection.documents[id]}
/>
</Expandable>
But if there is no deliveries I'd like to display a message like there's no deliveries. I can use .length and !deliveries (I get that), but it seems like my conditional isn't working:
render() {
console.log(this.props.collection.ids.length) //Getting how many deliveries there are with their id
return (
<div>//Struggling with this:
{!this.props.collection.ids && this.props.collection.ids.length < 1
? <p>No deliviers</p>
: <div className="box">
{this.props.collection.ids
.filter(
id =>
// note: this is only passed when in top level of document
this.props.collection.documents[id][
this.props.schema.foreignKey
] === this.props.parentDocumentId
)
.map(id => {
return (
<Expandable>
<ObjectDisplay
key={id}
parentDocumentId={id}
schema={schema[this.props.schema.collectionName]}
value={this.props.collection.documents[id]}
/>
</Expandable>
)
})}
</div>}
</div>
)
}
I bet my problem is super basic, but I just can't get it to work.. Help is much appreciated!!
Change your && to ||. You want to render "no delivers" if you have no ids (first test) OR if your ids.length is < 1
Your problem seems indeed to be with your condition.
!this.props.collection.ids && this.props.collection.ids.length < 1
!this.props.collection.ids is only true when the array is falsy. However, an empty array is not falsy - it's truthy.
this.props.collection.ids.length < 1 is true when the array is empty.
Since you are doing && you require the array to be falsy and empty at the same time, which can never happen.
So simply change the condition from && to || and it should work. In other words:
!this.props.collection.ids || this.props.collection.ids.length < 1
though I think this is prettier:
!this.props.collection.ids || !this.props.collection.ids.length
Your condition throws an error. See here
!this.props.collection.ids && this.props.collection.ids.length < 1
^
!false && undefined
Change your condition to
this.props.collection.ids && this.props.collection.ids.length > 1
and put your placeholder in the else block of your ternary.
I have an array of modals in my redux store that looks like this:
modals: [
{id: "modal1", isDisplayed: false},
{id: "modal2", isDisplayed: true}
]
In my React component, I want to have simple condition statements to display or not display my modals. I'm having a bit of trouble setting my condition statements right.
{this.props.modals["modal1"].isDisplayed ? <Modal1 /> : null}
{this.props.modals["modal2"].isDisplayed ? <Modal2 /> : null}
What's the right syntax to check the isDisplayed property of a given modal in my modals array?
Your modals property in the store is an Array. You can't access it by id.
This code will work:
{ this.props.modals[0].isDisplayed && <Modal1 /> }
{ this.props.modals[1].isDisplayed && <Modal2 /> }
Alternatively you can store it in the following way:
modals: {
modal1: { isDisplayed: false },
modal2: { isDisplayed: true },
}
Then your code will work.
I would recommend using Array.find, however it can't be inlined well in an expression without null coalescing operator.
This would break when a modal is not found (when find returns undefined)
{ this.props.modals.find(x => x.id === "nonexistingmodal").isDisplayed && <ModalXYZ /> }
With a little helper function you can implement it safely with minor code changes:
const select = (from, selector) => from && selector(from)
{ select(this.props.modals.find(x => x.id === "modal3"), x => x.isDisplayed) && <Modal3 /> }
You should consider using a Map or just a plain object as a modal store in order to express key relationships.