Reaktivitet av state i React

Låt oss nu titta på hur reaktivitet fungerar. Den gör så att när state ändras visas förändringarna omedelbart på skärmen.

Låt oss titta på ett exempel. Antag att vi har ett state med namnet på en produkt:

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

Låt oss visa produktens namn i renderingen:

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

Låt oss nu skapa en knapp som, när man klickar på den, kommer att ändra vårt state:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

I klickhanteraren använder vi funktionen setName, för att sätta ett nytt namn på produkten:

function clickHandler() {
	setName('xxxx');
}

Låt oss samla all vår kod tillsammans. Resultatet blir att efter att ha klickat på knappen kommer texten omedelbart att ändras till det nya värdet:

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

Att använda separata hanterarfunktioner är inte obligatoriskt. Man kan använda en anonym pilfunktion:

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

Det finns state för användarens förnamn och efternamn. Visa dem i renderingen. Skapa knappar för att ändra dessa state.