How to Add a Condition Before Rendering React createElement Components?

Web Development
,
1

I have the following code for creating React elements. I want to check if props.attributes.url is not empty before rendering this code. Since this block of code is part of a larger code group, I can’t just add an if condition and return the block. How can I achieve this inline?

React.createElement("a", {
    href: props.attributes.url
  },
  React.createElement("img", {
    src: "image.jpg"
  })
);
2

Here’s how you can achieve this inline:

props.attributes.url && React.createElement("a", {
    href: props.attributes.url
  },
  React.createElement("img", {
    src: "image.jpg"
  })
);

Just Add the props before your React Create Element.
If you are checking an empty string, you might want to convert it to its boolean first by using !!

!!props.attributes.url && React.createElement("a", {
    href: props.attributes.url
  },
  React.createElement("img", {
    src: "image.jpg"
  })
);

This should solve your problem.