Verileri Props Üzerinden Geçirmek

Board componentinden Square componentine bazı verileri geçirmeyi deneyelim.

Board’un renderSquare fonksiyonunda, bir value propsu Squareye geçirmek için kodu değiştirin:

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

Daha sonra {/ * TODO * /} yazan kısmı {this.props.value} ile Square’ın render fonksiyonunu değiştirin:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

Önce: Kodun ilk halinde karelerin içi boştu.

Sonra: Render edilmiş çıktıda her karede bir sayı görmeniz gerekiyor.

Mevcut kodu görüntüleyin

Board componentinin render fonksiyonundan this.renderSquare() fonksiyonu çağırılıyor. Parametre olarak ise 0’dan 8’e kadar parametreler gönderilmiş. this.renderSquare fonksiyonu ise Square componentini return ediyordu. Fakat içerisinde herhangi bir içerik yoktu. value={i} yaparak Square componentine value değerleri gönderdik. Square componentinde ise gelen bu valueyu this.props.value ile yazdırdık. Böylece oyun alanımızda karelerde 0’dan 8’e kadar rakamlar yazdırarak verileri props üzerinden componente geçirmiş olduk.

Sıradaki Eğitim: Etkileşimli Component