Trying to apply Ternary Operator on JSON Data with React - json

Question

I am trying to apply a Ternary operator to some JSON Data which is held in a separate file locally. Below is the JSON:
[
{
"id": 1,
"company": "Photosnap",
"logo": "./images/photosnap.svg",
"new": true,
"featured": true,
"position": "Senior Frontend Developer",
"role": "Frontend",
"level": "Senior",
"postedAt": "1d ago",
"contract": "Full Time",
"location": "USA Only",
"languages": ["HTML", "CSS", "JavaScript"]
},
{
"id": 2,
"company": "Manage",
"logo": "./images/manage.svg",
"new": true,
"featured": true,
"position": "Fullstack Developer",
"role": "Fullstack",
"level": "Midweight",
"postedAt": "1d ago",
"contract": "Part Time",
"location": "Remote",
"languages": ["Python"],
"tools": ["React"]
},
{
"id": 3,
"company": "Account",
"logo": "./images/account.svg",
"new": true,
"featured": false,
"position": "Junior Frontend Developer",
"role": "Frontend",
"level": "Junior",
"postedAt": "2d ago",
"contract": "Part Time",
"location": "USA Only",
"languages": ["JavaScript"],
"tools": ["React"
Now the issue I have is I conditionally want to show a button dependent on whether "new" is true. The same is said to be with the Featured button.
So I have written a Ternary Operator in my Component.
import React from 'react';
import './job-card.styles.css';
const JobCard = ({company, position, postedAt, contract, location, logo, featured, newJob }) => (
<div className="container">
<div className='card'>
<div className='companyName'>
<img src={logo} alt="logo" width="100" height="100"></img>
</div>
<div className='content'>
{{newJob} ? <button className='myButton'>New!</button> : null }
{{featured} ? <button className='myDarkButton'>Featured</button> : null }
<h2>{company}</h2>
<h1>{position}</h1>
<div className='details'>
<h3>{postedAt} ·</h3>
<h3>{contract} ·</h3>
<h3>{location}</h3>
</div>
</div>
</div>
</div>
)
export default JobCard;
This is just a card component and feeds into another component which displays all the cards.
import React from 'react';
import './job-listing.styles.css';
import JobCard from '../job-card/job-card.component.jsx/job-card.component';
import { Component } from 'react';
class JobListing extends Component {
constructor() {
super();
this.state = {
jobs: []
}
};
componentDidMount() {
fetch('/data.json')
.then(response => response.json())
.then(data => this.setState({jobs: data}))
}
render() {
return (
<div>
{this.state.jobs.map(({id, ...otherJobProps}) =>(
<JobCard key={id} {...otherJobProps} />
))}
</div>
)
}
}
export default JobListing;
The output I am getting is that they are all rendering as true when some of the new or featured are false in the JSON Data. Not sure what I have missed. Any help would be appreciated.

Answer 1

The problem is the inner {}.
{{newJob} ? <button className='myButton'>New!</button> : null }
// ^ here
Within JSX, {} denotes a javascript expression. But once you are within an expression, {} goes back to being normal object syntax. This is throwing off your ternary because you're checking whether an object with key newJob is truthy. Simply removing the brackets would fix it:
{newJob ? <button className='myButton'>New!</button> : null }
Regarding the new issue
I prefer not to destructure props like this, but to get it working most like you already have, destructure the new reserved word into an alias. Here is a simple proof of concept:
let test = [{ new: true }, { new: false }];
test.map(({new: isNew}) => console.log(isNew))
I would prefer to keep the data structured as is. But thats just a preference. It would also avoid the reserved word issue.
let test = [{ new: true }, { new: false }];
test.map((value) => console.log(value.new))

Answer 2

In your case, you can simply do:
{newJob
&& (<button className='myButton'>New!</button>)
}
{featured
&& <button className='myDarkButton'>Featured</button>
}
It works because in JavaScript, true && expression always evaluates to expression,
and false && expression always evaluates to false.
Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
And null, undefined, 0, "" are falsy values in JS.
Ternary operator is also an option if you really need two options (e.g):
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>

Answer 3

First of all, in the json objects I see the property new: true but the JobCard component receives newJob as part of it's props, not new.
To answer your question you see the buttons rendered because the condition {newJob} is an object which evaluates to true in:
{{newJob} ? <button className='myButton'>New!</button> : null }
Why? Because {newJob} is the same as this: { newJob: newJob } which is creating an object with a property called newJob and assigning it the value of newJob that you get from the component props.
What you want to do is one of the following:
{newJob ? <button className='myButton'>New!</button> : null }
{newJob && <button className='myButton'>New!</button> }