Default Values

What happens if a parent forgets to pass a prop? It will be undefined.

You can use standard JavaScript default parameters to handle this safely!

function Avatar({ url = "/default-avatar.png", size = 50 }) {
  return <img src={url} width={size} height={size} alt="Avatar" />;
}

function App() {
  return (
    <div>
      {/* Uses the defaults! */}
      <Avatar /> 
      
      {/* Overrides the defaults! */}
      <Avatar url="/me.jpg" size={100} />
    </div>
  );
}