CODEWITHSUNDEEP
javascriptjsonreactjs
Caleb
Caleb

Reputation: 489

excluding missing data when mapping through JSON in React/Js

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;

Upvotes: 1

Views: 343

Answers (2)

karo-s
karo-s

Reputation: 414

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

Upvotes: 1

Caleb
Caleb

Reputation: 489

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

Upvotes: 0

Related Questions