Writing JSX with JavaScript

September 6, 2022

const ModalButton = ({ label, mode }) => {
  return (
    <button type="submit">
      {mode == "new" && (
        <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />) label
      }
    </button>
  );
};

This label is underlined as red in my code editor. Why it won’t let me to have JavaScript with JSX?

>Solution :

The second operand of && has to be a single value; right now, you’re trying to give it two. To treat the icon and the text node after it as a unit (a single value), you need to wrap them in something, such as a fragment: <>_____</>

const ModalButton = ({ label, mode }) => {
    return (
        <button type="submit">
            {mode == "new" && (
                <>
                    <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />
                    {label}
                </>
            )}
        </button>
    );
};

(You also had the ) in the wrong place; I’ve fixed it above. It shouldn’t be just after the icon, it should be after the entire operand for && [so with this change, it’s after the end of the fragment].)

Also, if you want to use the value of label, you’ll need to wrap it in a JSX expression (as above): {label}.