I would lik to you use the following Ternary operator within React JSX:
<Table.Cell>{`${user.company !== null ? <Link to={`/companies/${user.company._id}`}>`${user.company.name}`</Link> : '' }`}</Table.Cell>
I get however the following value displayed: [object Object]
When I use this Ternary operator, the value is displayed right:
<Table.Cell>{`${user.company !== null ? `${user.company.name}` : '' }`}</Table.Cell>
And when I use this JSX code without the Ternary operator, the value is also right:
<Table.Cell><Link to={`/companies/${ user.company._id}`}>{user.company.name_company}</Link></Table.Cell>
However, I would like to use a conditional React Router Link tag to create an hyperlink. I have the same problem with usage of other HTML tags within the Ternary operator.
What am I am doing wrong?
Your syntax is not right. You should rewrite your ternary check in JSX like this:
<Table.Cell>{ user.company !== null ? <Link to={`/companies/${user.company._id}`}>{user.company.name}</Link> : null }</Table.Cell>
Or you can check it this way:
<Table.Cell>{ user.company !== null && <Link to={`/companies/${user.company._id}`}>{user.company.name}</Link> || null }</Table.Cell>
Hope this helps.
Related
I am facing some issue while assigning value to an object key using nested ternary operator during the sonar test,
https://rules.sonarsource.com/javascript/RSPEC-3358
Here is my code:
const demoObject={
demoKey: <condition1> ? <condition2> ? "value1" : demoFunc("value2") ?? "" : ""
}
This above code is working fine, but while running sonar test, as the rule says this is not accepted.
But I need to assign value to demoKey also cannot use IIFE for assignment.
Finally I got the solution to handle this kind of situation. we can use && and ?? to do this.
Here is the code example:
const demoObject={
demoKey: (<condition1> &&
(<condition2> ? "value1" : demoFunc("value2") ?? "")
) ?? ""
}
Also the brackets are as important as && and ??
I have this deeply nested value
eventsubcategoryvalue: data.body.spending.requestspend==='y' ? data.body.spending.allowspend : chargeamount
so here eventsubcategoryvalue is decided on basis of result of the ternary operator. I want to use optional chaining here instead of having this complex nested thing. How can I re write it? I am unable to understand even after going through the MDN doc.
How can one rewrite this with optional chaining?
Try
(eventsubcategoryvalue) ? ( data.body.spending.requestspend === 'y' ? data.body.spending.allowspend : chargeamount ) : chargeamount
I'm trying to do the following in my Vue application:
<template v-slot:cell(selected)="{ item }" >
<b-checkbox
v-model="item.selected != undefined ? item.selected : defaultCheckbox"
></b-checkbox>
</template>
I have to make sure item.selected is not undefined or else I get an error Cannot read properties of undefined (selected). When I use the conditional ternary operator in my v-model, I get a Syntax Error: Unexpected token. Why is that? How do I fix this so that I can still use item.selected even if it's not defined?
You can use v-if/else directives to define checkboxes for both cases:
<b-checkbox v-if="item.selected"
v-model="item.selected"
></b-checkbox>
<b-checkbox v-else
v-model="defaultCheckbox"
></b-checkbox>
A few days, i try to trim the response value in a vue condition.
I need this, when the value is null or empty apply the condition.
<li v-if="item[0].otrodl4.trim() == ''" class="progress-step">
But I got the error
vue.js:597 [Vue warn]: Error in render: "TypeError: Cannot read property 'trim' of null"
The problem is that some values bring only whitespace and no more, that should be considered null or empty.
E.G.
I tried it with filters but I get the same error.
Thanks for read.
Greetings.
Try this:
!item || !item[0] || !item[0].otrodl4 || item[0].otrodl4.trim() == ''
Basically, you have to check that item is defined and not null. And that the first element of that array exists AND that this element has otrodl4 property.
Try this:
item[0] && item[0].otrodl4.trim() == ''
So, the only time it checks if item[0].otrodl4.trim() == '' is if there's a value in the 0 index position of the item array.
It's known as a short-circuit conditional and you can read all about it here.
I have tried with trim() and it is working fine. please try if this can be help to you.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<!--if only space in text it will display "hello space" else no dsplay. -->
<p v-if="text.trim()==''">hello whitespace {{ text | trim }}</p>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
text: ' ' // added only a space
}
}
});
</script>
</body>
</html>
This is a TypeError where the variable you are trying to manipulate is not what it is thought to be by the developer.
Always happen to a language without proper typing.
Therefore, you can do an optional chaining and check the variable is what it is supposed to be first.
ES2020 has allowed us to use optional chaining to type check.
For example,
v-if="!!item?.[0]?.otrodl4?.trim && item?.[0]?.otrodl4?.trim() == ''"
!! is a type conversion to falsy values like null or undefined or empty string to become false.
It makes sure that otrodl4 has a property method trim before calling the method and therefore won't cause TypeError anymore.
I am trying to re-write the statement below using the javascript ?: syntax.
if(type of someVariable !="undefined"){
someFunction(someVariable);
}else{}
This is my current attempt and it's causing a syntax error
typeof someVariable != "undefined" ? someFunction(someVariable) : ;
If any one can tell met what I'm doing wrong I'd appreciate it. Any accompanying tips on best practices for defensive programing are welcome.
?: style (requires expressions on either side of the :):
typeof(someVariable) != 'undefined' ? someFunction : null;
Ninja-style:
someVariable !== undefined && someFunction(someVariable);
[Edit: I couldn've sworn noop was a thing in Javascript, but apparently I was wrong. Switched to null]
even though the ternary operation controls the program flow, I'd use it only in assignment operation or when returning a value from a function.
check this out:
Benefits of using the conditional ?: (ternary) operator
It should look like this.
someVariable != undefined ? someFunction(someVariable):someOtherfunction(someOtherVarialbe);
if you do not want else statement and want it in single line you can do like this:
if(someVariable != undefined){someFunction(someVariable);}