React Tutorial 2023 30 – useState Hook’u 2 – Birden Fazla State Kontrolü

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bir önceki yazımda useState kavramına giriş yapmıştık. Calculator projemiz üzerinden tek bir state kontrolünü yapmayı öğrendik.

Yine aynı proje üzerinden bir ekleme yapıp birden fazla state’i aynı anda kontrol etmeyi öğrenelim.

Calculator projemizde, işlem adetimizi tutan ve bunu ekranda gösteren bir state oluşturalım. Böylece her işlem yapıldığında hem result değerini, hem işlem adetinin state’lerini kontrol edelim.

İlk önce görüntümüzü oluşturacak kodlarımızı yazalım.

Calculator.css dosyamızda aşağıdaki güncellemeleri yapalım.

.result {
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    border-radius: 20px;
    height: 75px;
    margin-bottom: 20px;
}


.result span {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #0056b3;
}

Calculator.jsx dosyamızda className’i result olan div içine bir span ekliyoruz.

<div className="result">
     <h1 id="result">{result}</h1>
     <span>İşlem Adeti: 0</span>
</div>

Böylece aşağıdaki görüntümüzü elde etmiş oluyoruz.

Şimdi burada işlem adetini takip etmek için counter isminde bir state tanımlayıp başlangıç değerine 0 verelim. Sonrasında her işlem yapıldığında count’u 1 artıralım.

Kodlarımız son olarak şöyle gözükecek.

import "./Calculator.css";
import React, { useState } from 'react';

const Calculator = () => {

    const [result, setResult] = useState(0);
    const [count, setCount] = useState(0);

    const handleCalculate = (event) => {

        event.preventDefault();

        const form = event.target;
        const num1 = parseFloat(form.elements.num1.value);
        const num2 = parseFloat(form.elements.num2.value);
        const operation = form.elements.operation.value;

        let result;
        
        switch (operation) {
            case 'add':
                result = num1 + num2;
                break;
            case 'subtract':
                result = num1 - num2;
                break;
            case 'multiply':
                result = num1 * num2;
                break;
            case 'divide':
                result = num1 / num2;
                break;
            default:
                console.log('Invalid operation');
                return;
        }

        setResult(result);
        setCount(count + 1);
    };

    return (

        <div className="app">

            <div className="result">
                <h1 id="result">{result}</h1>
                <span>İşlem Adeti: {count}</span>
            </div>

            <form onSubmit={handleCalculate}>
                <input type="number" name="num1" required />
                <input type="number" name="num2" required />
                <select name="operation"  required>
                    <option value="">Select operation</option>
                    <option value="add">Add</option>
                    <option value="subtract">Subtract</option>
                    <option value="multiply">Multiply</option>
                    <option value="divide">Divide</option>
                </select>
                <button type="submit">Calculate</button>
            </form>

        </div>


    )
}

export default Calculator;

Stateti tanımladık.

const [count, setCount] = useState(0);

Bu state’i değişimini aşağıdaki kod ile sağladım.

setCount(count + 1);

Bu değeri ekranda görebilmek için span etiketi içinde bu count değişkenini çağırıyorum.

<span>İşlem Adeti: {count}</span>

Hepsi bu kadardı.

Şimdi kontrol edebiliriz.

4 adet işlem yaptım. Ekranda başarılı şekilde gösterildi.

Bu şekilde bir Component içinde birden fazla state aynı anda kontrol edilebilir.

Bir sonraki yazımda görüşmek üzere.