React: Warunkowe renderowanie komponentów

W React można wyświetlać komponenty w zależności od stanu. Takie renderowanie nazywamy warunkowym.

Sposób 1: Instrukcja if

import React, { useState } from 'react';

const SalePrice = () => {
    return <h2>Price: 100$</h2>;
}

const DiscountPrice = () => {
    return <h2>Price: only 99$!!!</h2>;
}

const ProductPrice = ({isOnSale}) => {
    if (isOnSale) {
        return <DiscountPrice />
    }

    return <SalePrice />
}

const App = () => {
    const [discountPrice, setDiscountPrice] = useState(false);

    return <div>
            <ProductPrice isOnSale={discountPrice} />
            <button onClick={() => setDiscountPrice(!discountPrice)}>Toggle price</button>
        </div>;
}

Sposób 2: Operator ?:

const App = () => {
    const [discountPrice, setDiscountPrice] = useState(false);

    return <div>
            {discountPrice ? <DiscountPrice /> : <SalePrice />}
            <button onClick={() => setDiscountPrice(!discountPrice)}>Toggle price</button>
        </div>;
}

Sposób 3: Operator AND

const App = () => {
    const [error, setError] = useState(false);

    return <div>
            {error && <h2>Error!</h2>}
            <button onClick={() => setError(!error)}>Toggle error</button>
        </div>;
}

Sposób 4: Wartość null

Jeśli masz taki przypadek, że nic nie chcesz wyświetlać, wyślij po prostu wartość null:

const Error = ({message}) => {
    if (!message) {
        return null;
    }

    return <h2>{message}</h2>;
}

const App = () => {
    const [error, setError] = useState(null);

    return <div>
        <Error message={error} />
        <button onClick={() => setError('Error!')}>Set error</button>
        <button onClick={() => setError(null)}>Remove error</button>
    </div>;
}