excluding missing data when mapping through JSON in React/Js

Question

I have a React component set up to map through a JSON file of projects and display the information in a card. However some of projects have less information that others. Namely my wordpress website does not need a link to the code. However I have it set up like:

 Code:
              <a href={project.code} target="_blank"><p>{project.code}</p></a>

How can I change this to an if statement, saying if Code is a property then return that block of code or else do not display 'code:' at all.

Here is my two files for reference.

Projects.js:


import React from "react";
import ReactCardFlip from "react-card-flip";
import Data from "../../ProjectData.json";
import './Projects.scss'
import '../MediaQueries/Projects.scss'

const CardStyle = {
  padding: "30px",
  margin: "30px",
  width: "250px",
  height: "300px",
};

const Card = ({ project }) => {
  const [isFlipped, setIsFlipped] = React.useState(false);
  // console.log(project);
  return (
    <div className="Card-wrapper">
    <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
      <div
        style={CardStyle}
        onMouseEnter={() => setIsFlipped((prev) => !prev)}
        className="CardFront"
      >
        <div className="CardFront-div1">
          <h3 className="CardFront-div1-title">{project.title}</h3>
          <img width="250" src={project.gif} alt="" className="CardFront-div1-gif"/>
          <div className="CardFront-div1-list">
            <p>{project.html}</p>
            <p>{project.css}</p>
            <p>{project.javascript}</p>
            <p>{project.react}</p>
          </div>
        </div>
      </div>
      <div
        style={CardStyle}
        onMouseLeave={() => setIsFlipped((prev) => !prev)}
        className="CardBack"
      >
          <div>
            <p>{project.description}</p>
            <span>
              Project:
              <a href={project.link} target="_blank"><p>{project.link}</p></a>
            </span>
            <span>
              Code:
              <a href={project.code} target="_blank"><p>{project.code}</p></a>
            </span>
          </div>
      </div>
    </ReactCardFlip>
    <button onClick={() => setIsFlipped((prev) => !prev)} className="cardflip-button">Flip</button>
    </div>
  );
};

const Projects = () => {
  return (
    <>
    <h1>Projects</h1>
    <div  className="Projects" id="Projects">
      {Data.map((item, index) => (
        <Card project={item} key={`card-${index}`} />
      ))}
    </div>
    </>
  );
};

export default Projects;

Have you tried [Googling it](https://stackoverflow.com/a/31164357/13608595)? — Nate Levin, Sep 06 '20 at 18:42

score 1 · Accepted Answer · answered Sep 06 '20 at 19:01

1

   {
    project.code ? (
     <span>
       Code:
        <a href={project.code} target="_blank"><p>{project.code}</p></a>
     </span>
     ) : null
   }

answered Sep 06 '20 at 19:01

karo-s

384
2
15

score 0 · Answer 2 · answered Sep 06 '20 at 19:00

Post got deleted by the user but the code is what I was looking for:

   {!!project.code && (
              <span >
              Code:
              <a href={project.code} target="_blank"><p>{project.code}</p></a>
            </span>
            )}

excluding missing data when mapping through JSON in React/Js

2 Answers2