13. ES6+ w React

// STARY SPOSÓB
function UserCard(props) {
  const name = props.user.name;
  const email = props.user.email;
  const age = props.user.age;

  return <div>{name} ({age}) — {email}</div>;
}

// Z DESTRUKTURYZACJĄ
function UserCard({ user: { name, email, age = 'N/A' } }) {
  return <div>{name} ({age}) — {email}</div>;
}

// Destrukturyzacja tablicy — useState
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

// Aktualizacja zagnieżdżonego obiektu w stanie
const [profile, setProfile] = useState({
  name: 'Jan',
  address: { city: 'Warszawa', zip: '00-001' }
});

// ŹLE — bezpośrednia mutacja
profile.address.city = 'Kraków';

// DOBRZE — spread do nowego obiektu
setProfile(prev => ({
  ...prev,
  address: {
    ...prev.address,
    city: 'Kraków'
  }
}));

function ProductCard({ product }) {
  // Bez optional chaining: błąd gdy reviews jest null/undefined
  // const firstReview = product.reviews[0].text; // Crash!

  // Z optional chaining: bezpieczny dostęp
  const firstReview = product?.reviews?.[0]?.text ?? 'Brak recenzji';
  const price = product?.pricing?.discounted ?? product?.price ?? 0;

  return (
    <div>
      <h2>{product?.name}</h2>
      <p>Cena: {price} zł</p>
      <p>Recenzja: {firstReview}</p>
    </div>
  );
}