Passing props to a component

Probs are immutable objects that you can pass into child JSX tags.

You should never attempt to change props, instead use state.

Passing props

Avatar.js

// via destructuring
function Avatar({ person, size = 100 }) {
  // person and size are available here
}

// via props object
function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Profile.js

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

// or pass by spreading (dont do this since its bad practice)
function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Passing Children

Some JSX

<Card>
  <Avatar />
</Card>

Card.js

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}