Props

In Components, we used the Button component three times, but all three were identical. What if we want to show a different label or a different color each time? That's what props are for. This lesson covers how to send data into a component from outside, with simple examples.

What Are Props?

Props (properties) are how you send data into a component from outside -- much like giving an HTML tag an attribute (remember "Attributes and className" from the JSX lesson), except here the value reaches the component function as a parameter.

Sending Data from Parent to Child

When you use a component (that is, "render" it), you can give it values like attributes -- these become that component's props:

// Props (properties), bir component'e DIŞARIDAN veri göndermenin yoludur --
// tıpkı bir HTML etiketine attribute vermek gibi, ama burada değer, senin
// component fonksiyonuna bir parametre olarak ulaşır.
function Greeting(props) {
  return <h1>Merhaba, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Ayşe" />;
}

console.log(App());
// Sonuç: <h1>Merhaba, Ayşe!</h1>

Here, App is the component that uses Greeting (the "parent"), and Greeting is the component being used (the "child"). By writing name="Ayşe", we send Greeting a prop named name.

Using Multiple Props

You can send a component as many props as you want:

// Bir component'e istediğin kadar prop gönderebilirsin -- her biri
// props nesnesinin ayrı bir alanı olarak fonksiyona ulaşır.
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Yaş: {props.age}</p>
      <p>Şehir: {props.city}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Ayşe" age={28} city="İzmir" />;
}

console.log(App());

Each prop reaches the component as its own field on the props object -- props.name, props.age, props.city, and so on.

Reading Props with Destructuring

Instead of writing props.name everywhere, most React code uses destructuring:

// Her yerde "props.name", "props.age" yazmak yerine, çoğu React kodunda
// destructuring kullanılır -- fonksiyon parametresinin içinde, ihtiyacın olan
// alanları doğrudan değişken olarak çıkarırsın. İki örnek de AYNI işi yapar,
// ikincisi yalnızca daha kısa ve daha yaygın kullanılan yazım şekli.

// 1) Destructuring OLMADAN:
function UserCardLong(props) {
  return <p>{props.name} -- {props.age} yaşında</p>;
}

// 2) Destructuring İLE (yaygın kullanılan biçim):
function UserCard({ name, age }) {
  return <p>{name} -- {age} yaşında</p>;
}

console.log(UserCardLong({ name: "Ayşe", age: 28 }));
console.log(UserCard({ name: "Ayşe", age: 28 }));

Both versions do exactly the same thing -- destructuring just removes the repeated props. and makes the code a bit shorter. This is the more common style, and we'll keep using it in later lessons.

Default Values (Default Props)

What happens if a prop is never sent? You can define a default value right in the destructuring:

// Bir prop hiç gönderilmezse ne olsun? Destructuring sırasında bir
// "varsayılan değer" (default value) tanımlayabilirsin -- normal JavaScript
// fonksiyon parametrelerindeki varsayılan değerlerle tamamen aynı fikir.
function Greeting({ name = "Misafir" }) {
  return <h1>Merhaba, {name}!</h1>;
}

console.log(Greeting({ name: "Ayşe" })); // Merhaba, Ayşe!
console.log(Greeting({}));               // Merhaba, Misafir! (varsayılan kullanıldı)

name = "Guest" is exactly the same idea as default values for regular JavaScript function parameters -- if name isn't sent, Guest is used.

Props vs. Regular Function Parameters

Props really are nothing more than a regular function parameter -- there's no special mechanism from React here. The difference is just in how you use it: you'd call a normal function as Greeting({ name: "Ayşe" }), while you "call" a component inside JSX as <Greeting name="Ayşe" />. There's also an important rule: props are read-only -- a component should never change a prop it receives. If you need to change data over time, that's what "state" is for -- we'll cover that in the State & Events category.

Summary and Glossary

Props are how you send data into a component from outside. A parent component gives a child values like attributes; the child reads them via props (or directly as variables, with destructuring). If a prop isn't sent, a default value can be defined. Props are read-only.

Glossary

Props — Read-only data sent into a component from outside.

Parent Component — A component that uses (renders) another component.

Child Component — A component used by a parent component.

Destructuring — Syntax for pulling an object's fields directly into variables (like { name, age }).

Default Prop — A predefined value used when a prop isn't sent.