Komponenttien propsit Reactissa

Edellisessä oppitunnissa näytimme useita tuote-esiintymiä:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Tällä hetkellä jokainen tuotetunnuksen kutsu näyttää ruudulla saman asian. Tehdään nyt jokaisesta tuotteesta ainutlaatuinen.

Oletetaan esimerkiksi, että jokaisen tuotteen tulee olla nimi ja hinta. Tehdään niin, että jokainen tuotetunnuksen kutsu näyttää tuotteen, jolla on oma nimensä ja hinta, muotoiltuna haluamaamme ulkoasua varten.

Tätä varten meidän on suoritettava useita vaiheita.

Aluksi, kun kutsutaan tuotetunnusta, me kirjoitamme tähän tunnukseen kaksi attribuuttia: attribuutti name tuotteen nimellä ja attribuutti cost hinnalla, näin:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Näiden attribuuttien nimet ja arvot siirtyvät objektina komponenttimme Product konstruktorifunktion ensimmäiseen parametriin:

function Product(props) {
	console.log(props); // objekti, jossa on avaimet name ja cost
	
	return <p>
		product
	</p>;
}

Parametrin nimi voi olla mikä tahansa, mutta Reactissa on tapana nimetä se props. Käytännössä tämä ei ole vain parametrin nimi, vaan tärkeä React-konsepti.

Konseptin ydin on seuraava: komponenttitunnusta kutsuttaessa tähän tunnukseen voidaan kirjoittaa attribuutteja, joissa on tietoja. Nämä tiedot siirtyvät komponentin propseihin. Sitten komponentti voi käyttää näitä tietoja, esimerkiksi tarvittavan ulkoasun luomiseen.

Tehdään tämä:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

Mukavampaa ja yleisemmin hyväksyttyä on olla käyttämättä props-objektia suoraan, vaan suorittaa välittömästi destrukturointi propseista suoraan funktion parametreissa:

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

Tee komponentti Employee, joka näyttää työntekijän tiedot ruudulla. Olkoon näitä tietoja sukunimi, etunimi, toinen etunimi ja palkka. Muotoile nämä tiedot haluamaasi ulkoasua varten. Näytä App-komponentissa kolme työntekijää erilaisilla tiedoilla.