React kullanarak bir sayının mutlak değerinin hesaplanması, JavaScript tarafından desteklenen Math sınıfı içinde bulunan abs metodu sayesinde yapılabilir. Aşağıdaki kod bloğunda, kullanıcı tarafından girilen bir sayının mutlak değerinin hesaplanması ve sonucun ekrana yazdırılması gösterilmektedir.

import React, { useState } from "react";

function MutlakDegerHesapla() {
  const [girilenSayi, setGirilenSayi] = useState("");
  const [sonuc, setSonuc] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setSonuc(Math.abs(girilenSayi));
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={girilenSayi}
          onChange={(e) => setGirilenSayi(e.target.value)}
        />
        <button type="submit">Hesapla</button>
      </form>
      <p>Sonuç: {sonuc}</p>
    </div>
  );
}

export default MutlakDegerHesapla;

Bu kod bloğunda, React state kavramını kullanıyoruz. State, bir component içindeki verilerin dinamik olarak değişebilmesini ve bu verilerin UI tarafında görüntülenmesini sağlar. Bu örnekte, girilenSayi state'i kullanıcı tarafından girilen sayıyı, sonuc state'i ise hesaplanan mutlak değeri tutar. handleSubmit adlı fonksiyon, kullanıcı tarafından formun submit edilmesi durumunda çalışır ve Math sınıfının abs metodunu kullanarak mutlak değeri hesaplar.