Simple conditional in react hook return

Question

I'm just starting with react and hooks and I terribly fail writing conditionals in the dom related return. How can I do this? The chevron should change depending on the toggle.

const Description = () => {
    const {t} = useTranslation();
    const [isToggled, setToggled] = useState(false);
    const toggleTrueFalse = () => setToggled(!isToggled);
    return (
        <div>
            {if isToggled == true }{
            <ChevronRight className="arrow" size="20"/>
            } else{
            <ChevronDown className="arrow" size="20"/>
            }
        </div>

       );
    };
export default Description;

Why don't you follow basic Getting Started tutorial ? It's probably in the very first sections — Arnaud Claudel, Mar 26 '20 at 14:57

score 2 · Accepted Answer · answered Mar 26 '20 at 14:55

return (
        <div>
            {isToggled ? <ChevronRight className="arrow" size="20"/> :  <ChevronDown 
             className="arrow" size="20"/>}

        </div>

       );

In return you cannot use if conditions. if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. You got to use {} inorder to make a conditional decision. Hope this helps!

Simple conditional in react hook return

1 Answers1