Tilojen käyttö Reactissa

Käytetään funktiota useState tilan luomiseen, joka sisältää tuotteen nimen:

const state = useState('prod');

Tuloksena vakio state on taulukko, jonka ensimmäinen elementti sisältää tuotteen nimen, ja toinen - funktion nimen muuttamiseksi:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Lyhyyden vuoksi välikonstanttia taulukolle yleensä ei käytetä, vaan käytetään destrukturointia:

const [name, setName] = useState('prod');

Esitetään nyt tilamme tuotteen nimellä jossain merkintäkielessä:

return <p>
	<span>{name}</span>
</p>;

Kootaan kaikki yhteen ja saadaan seuraava koodi:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

Jos tämä koodi käynnistetään, niin aluksi div-elementissä näytetään tilan alkuarvo, meidän tapauksessamme 'prod'. Kun tila muutetaan funktiolla setName, niin merkintäkieleen tulee automaattisesti tilan uusi arvo.

Oletetaan, että haluat näyttää ruudulla käyttäjän tiedot: hänen etunimensä, sukunimensä, ikänsä. Tee tätä varten vastaavat tilat alkuarvoilla.