Props: a component's inputs

Props (short for properties) are a component's inputs: they let one component show different data each time you use it, like arguments to a function. React gathers them into one object, the component's first parameter.

const Blade = (props) => {
  return <p>{props.metal} blade, {props.weight} kg</p>;
};

const Armory = () => {
  return (
    <>
      <Blade metal="steel" weight={3} />
      <Blade metal="bronze" weight={2} />
    </>
  );
};

• A parent passes props like attributes: <Blade metal="steel" />.
• The component receives them all in one object, usually called props.
• Strings go in quotes; numbers, arrays, objects, functions and JSX go in braces: weight={3}.
• Old class components read this.props; in a function component it's simply the parameter.