如何在 React JS 中使用三元运算符将 Font Awesome Icons 与文本一起使用？

Question

So I have a button and when I click the button the text changes and I managed to change the text after click using ternary operator and now I want to add icons from font awesome before the text. I used hooks to change the button text. Is there any way I can add these icons before the text?

Code

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus,faCheck } from '@fortawesome/free-solid-svg-icons'
const [disableBtn,setDisableBtn]=useState(false)
const [btnText,setBtnText]=useState(true)
<div class="buttons">
        <button className={disableBtn ? "addToClub disable":"addToClub"} onClick={()=>{handleTransfer(props.players);setBtnText(!btnText);setDisableBtn(true)}} >
            {btnText? <FontAwesomeIcon icon={faPlus} /> "Add to Club"   : (<FontAwesomeIcon icon={faCheck} /> "Player Already Added") }
        </button>
       
</div>

Answer 1

You can use react fragment to wrap the font awesome icon component and the text.

Note: <>some content</> is shorthand for <React.Fragment>some content</React.Fragment> .

<button
   className={disableBtn ? "addToClub disable" : "addToClub"}
   onClick={() => {
      handleTransfer(props.players);
      setBtnText(!btnText);
      setDisableBtn(true);
   }}
>
   {btnText ? (
      <>
         <FontAwesomeIcon icon={faPlus} /> Add to Club
      </>
   ) : (
      <>
         <FontAwesomeIcon icon={faCheck} />
         Player Already Added
      </>
   )}
</button>;