Q:

Trying to apply Ternary Operator on JSON Data with React

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} &#183;</h3>
            <h3>{contract} &#183;</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.

A:

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

