What are props in React and how do you pass them?

Short answer

Props are read-only objects passed from parent to child components in React. They let you customize and configure child behavior and appearance.

How it works

You pass props similarly to HTML attributes. Inside the child component, you access them via the props object or by destructuring. React components must never modify their own props.

Example

function Avatar({ src, alt = 'User avatar', size = 64 }) {
  return <img src={src} alt={alt} width={size} height={size} />;
}

function Profile() {
  return <Avatar src="/me.jpg" alt="My photo" size={128} />;
}

Tips

• Use prop-types or TypeScript to document expected types.
• Spread props sparingly: <input {...props} /> is convenient but can pass unexpected attributes.
• For deeply nested data, consider Context or a state library instead of prop drilling.