2.8 - Les conditions

A – À quoi peuvent servir les conditions dans react ?

Il est possible de conditionner le rendu des composants, le montage du composant pour faire écho au cours sur le cycle de vie des composants ce qui aura par ailleurs pour effet de déclencher la méthode componentDidMount lors de son rendu et de déclencher la méthode componentWillUnmount lors de sa destruction.

B – Réaliser un rendu conditionnel

Nous allons donc reprendre notre horloge et conditionner le rendu, l'affichage de celle-ci grâce à un state, un évènement et une condition.

Nous utiliserons donc un bouton qui affichera l'horloge et la masquera lorsqu'elle est affichée.

Nous allons donc créer un state dans notre composant "App.tsx" que nous nommerons "isVisible" avec une valeur par défaut à false et une fonction "handleDisplayClock" qui mettra à jour le state par son inverse lorsque le bouton sera cliqué :

type Props = {}

type State = {
	isVisible: boolean
}

class App extends Component<Props, State> {
	state = {
		isVisible: false,
	}

	handleDisplayClock = () => {
		this.setState({ isVisible: !this.state.isVisible })
	}

	render = () => (
		<>
			<Tilte content='Hello World' />
			<Clock />
			<Article>
				<p>Je suis la propriété children du composant "Article"</p>
			</Article>
			<button onClick={() => this.handleDisplayClock()}>Cliquer ici !</button>
		</>
	)
}

Nous allons maintenant ajouter un log du state "isvisible" dans le rendu pour remarquer que celui-ci change bien de false à true et de true à false. Rappelez-vous qu'un composant est re-rendu à chaque modification du state, ce qui explique pourquoi ce log s'exécute à chaque modification du state, sans modification du state, il n'y a pas de re-rendu et le DOM n'est pas mis à jour.

Nous souhaitons maintenant conditionner l'affichage de l'horloge.

Nous souhaitons faire des conditions directement dans le JSX, deux types de conditions peuvent être utilisées dans le JSX :

• Les conditions ternaires
• Les conditions avec l'opérateur &&

Avec l'opérateur ternaire :

type Props = {}

type State = {
	isVisible: boolean
}

class App extends Component<Props, State> {
	state = {
		isVisible: false,
	}

	handleDisplayClock = () => {
		this.setState({ isVisible: !this.state.isVisible })
	}

	render = () => (
		<>
			<Tilte content='Hello World' />
			{this.state.isVisible ? <Clock /> : null}
			<Article>
				<p>Je suis la propriété children du composant "Article"</p>
			</Article>
			<button onClick={() => this.handleDisplayClock()}>Cliquer ici !</button>
		</>
	)
}

Avec l'opérateur logique && :

type Props = {}

type State = {
	isVisible: boolean
}

class App extends Component<Props, State> {
	state = {
		isVisible: false,
	}

	handleDisplayClock = () => {
		this.setState({ isVisible: !this.state.isVisible })
	}

	render = () => (
		<>
			<Tilte content='Hello World' />
			{this.state.isVisible && <Clock />}
			<Article>
				<p>Je suis la propriété children du composant "Article"</p>
			</Article>
			<button onClick={() => this.handleDisplayClock()}>Cliquer ici !</button>
		</>
	)
}

Cette manière de réaliser des conditions fonctionne puisqu'en qu’en JavaScript, true && expression est toujours évalué à expression, et false && expression est toujours évalué à false.

Notre bouton est maintenant fonctionnel et permet d'afficher et de masquer l'horloge.