React rendera komponent "onClick"

Är kanske inte mobilen som är problemet insåg jag nu.

Man kan inte returnera något i onClick. Detta gäller alla event handlers. (Eller kan och kan – React ignorerar i alla fall det du returnerar. Som tanke-experiment – om du kunde returnera element, hur skulle React veta var det ska visas?)

Det man i regel gör i onClick är att anropa funktioner som till slut gör en ”setState”. När man uppdaterar state i React så renderar React automatiskt om. Detta gör att du kan visa olika saker beroende på vad som är i ditt state.

Du skulle kunna göra något i den här stilen:

import React from 'react'
import CountryDetails from './CountryDetails'

const CountryListing = ({ country, showDetails, onShowClick }) =>
    <p style={{ margin: 0 }}>
        {country.name}
        <button onClick={() => onShowClick()}>
            show
        </button>
        {showDetails && <CountryDetails country={country} />}
    </p>

export default CountryListing

Vi har en prop ”showDetails” (boolean) som avgör om detaljerna ska synas eller inte.

Och så har vi en prop “showDetails” som är en funktion som ska köras vid klick på knappen.

Den som renderar CountryListing blir nu ansvarig för att hålla reda på vilka länder som är expanderade och att passa in en funktion som kan ändra på detta.

Du skulle också kunna ha state direkt i CountryListing. Något i stil med:

import React from 'react'
import CountryDetails from './CountryDetails'

const CountryListing = ({ country }) => {
    const [showDetails, setShowDetails] = React.useState(false)
    return <p style={{ margin: 0 }}>
        {country.name}
        <button onClick={() => setShowDetails(!showDetails)}>
            show
        </button>
        {showDetails && <CountryDetails country={country} />}
    </p>
}

export default CountryListing

Notera: Det var ett tag sedan jag höll på med React och jag testade inte koden innan jag postade så det kanske inte fungerar 100% men borde inte vara jättefel i alla fall.