How to show data in two cards in nextjs based on JSON response-CodePudding

I have a JSON response which sometimes has an empty key ("image"). I am fetching this with getServerSideProps():

[
    {
        "date": "03/11/2022, 18:45:24",
        "description": "Want to know more about simping and how to profit from it? Simps can make you a lot money on OnlyFans and this article details how to get and keep more simps.",
        "id": "a8cf9c135192d426511712242a2bb7e27bf70e39388baa61190fe0af24f8291c",
        "image": "",
        "link": "https://seobounty.com/the-ultimate-guide-to-simping-and-why-men-simp/",
        "tag": "OnlyFans Advertising Guide",
        "title": "The Ultimate Guide to Simping and Why Men Simp"
    },
    {
        "date": "02/02/2022, 20:10:21",
        "description": "Google Paid Search ads are one of the best digital advertising methods to target people who are actively searching and in the market for the products or services that your business offers. However, if you’re not experienced with Google Ads then you may fin",
        "id": "29dc9f038b5ee4bd68e96298627d5806c72e1f927b73077d725a86239a97d94f",
        "image": "https://activebusinessgrowth.ca/wp-content/uploads/2022/02/TN-23-Improve-ads.png",
        "link": "https://activebusinessgrowth.ca/5-ways-to-drastically-improve-your-google-ads/",
        "tag": "Digital Marketing",
        "title": "5 Ways To Drastically Improve Your Google Ads"
    }
]

I want to show data in left card - if it has an image, or in the right card - if the image is not present. I've stuck with this, and I don't know what I am doing wrong:

export default function Home({data}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <main className={styles.main}>
        <h1 className={styles.title}>
          title
        </h1>
        <p className={styles.description}>
          description
        </p>
        
        <div className={styles.grid}>
          {data.map(result =>{
            const{id, title, link, date, image, description, tag} = result;
            if(result.image !=="")
            {
              return(                    
          <div key={id} className={styles.card}>
            <h2><a href={link}>{title}</a></h2>
            <h4>{date}</h4>
            <div>
                    <a href = {link}>
                      <img src={image} alt="" width="40%" height="auto"></img> 
                      </a>
                  </div>
            <h3>{description}</h3>
            <p>{tag}</p>
            <p>root domain</p>
          </div>
            )
          }
          else if(result.image === "")
          {
            return (
              <div key={id} className={styles.card}>
            <h2><a href={link}>{title}</a></h2>
            <h4>{date}</h4>            
            <p>{tag}</p>
            <p>root domain</p>
          </div>
            )
          }
        })}
        </div>

I can only see one card (with images), I need to show two cards, stacked next to each other, where second card has no image, like this:

CodePudding user response：

The image key in the JSON response is sometimes empty which means that the value of 'image' key is null and not necessarily an empty string ("");

So in the else if condition checking the equality with empty string is not correct.

Just try

if (result.image) { // with image code } else { // without image code }

CodePudding user response：

The image in result may be falsy sometimes which is not empty string and hence not falling in any of the conditions. You should try this:

export default function Home({data}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          title
        </h1>
        <p className={styles.description}>
          description
        </p>

        <div className={styles.grid}>
          {data.map(result => {
            const { id, title, link, date, image, description, tag } = result;
            if (image) {
              return (                    
                <div key={id} className={styles.card}>
                  <h2><a href={link}>{title}</a></h2>
                  <h4>{date}</h4>
                  <div>
                    <a href = {link}>
                      <img src={image} alt="" width="40%" height="auto"></img> 
                    </a>
                  </div>
                  <h3>{description}</h3>
                  <p>{tag}</p>
                  <p>root domain</p>
                </div>
              );
            } else {
              return (
                <div key={id} className={styles.card}>
                  <h2><a href={link}>{title}</a></h2>
                  <h4>{date}</h4>            
                  <p>{tag}</p>
                  <p>root domain</p>
                </div>
              );
            }
          })}
        </div>
      </main>
    </div>
  );
};