Skip to main content

If

The If component can be used for simple conditional rendering. It will render its children whenever the condition passed to the isTrue prop is truthy. For more complex rendering logic, you can use the Show component

Import​

import { If } from 'react-haiku';

Usage​

Click to update state!
import { useState } from 'react';
import { If } from 'react-haiku';

export const Component = () => {
    const [number, setNumber] = useState(6);

    return(
        <>
            <b>Click to update state!</b>
            <If isTrue={number === 6}>
                <button onClick={() => setNumber(7)}>I like the number 6!</button>
            </If>
            <If isTrue={number === 7}>
                <button onClick={() => setNumber(6)}>7 is way better!</button>
            </If>
        </>
    );
}

API​

The If component accepts the following props:

  • isTrue - the condition to evaluate when rendering the component's contents