Props

What are props?

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.

Props are the information that you pass to a JSX tag. For example, className, src, alt, width, and height are some of the props you can pass to an img tag.

Code

demo.js

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="./images/butterstotch.webp"
      alt="Butters Stotch"
      width={100}
      height={100}
    />
  );
}

Variable Props

variable.js

export default function VariableAvatar({ className, src, alt, width, height }) {
  return (
    <img
      className={className}
      src={src}
      alt={alt}
      width={width}
      height={height}
    />
  );
}
 
<VariableAvatar
  className="avatar"
  src="./images/butterstotch.webp"
  alt="Butters Stotch"
  width={100}
  height={100}
/>;

Images displayed above use the next/image component

Hooks Hooks and Props Example