Where does the function Argument comes from?

I’m currently confused, where a argument is coming from. Because for my understanding I don’t implizite pass it anywhere.

Could someone maybe explain how to understand this example ? Thanks.

import React from 'react';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

export default function ToggleButtons() {
  const [alignment, setAlignment] = React.useState('left');

  const handleAlignment = (event, newAlignment) => {

  return (
      aria-label="text alignment"
      <ToggleButton value="left" aria-label="left aligned">
        <FormatAlignLeftIcon />
      <ToggleButton value="center" aria-label="centered">
        <FormatAlignCenterIcon />
      <ToggleButton value="right" aria-label="right aligned">
        <FormatAlignRightIcon />
      <ToggleButton value="justify" aria-label="justified" disabled>
        <FormatAlignJustifyIcon />

To narrow it further down: The newAlignment argument is the one that confuses me.


  const handleAlignment = (event, newAlignment) => {



The ToggleButtonGroup component handles this internally. It basically does something in a way of the example below. Note: this is pseudo code, not how it actually works.

const ToggleButtonGroup = ({ onChange, children }) => {
  const handleInternalOnChange = event => {
    const value = event.target.value;

    onChange(event, value); // Both the event and the value is passed.

  return (
    <div onChange={handleInternalOnChange}>

So ToggleButtonGroup wraps the onChange function and handles the original event, getting the values from it, before passing both the event and the value to your onChange handler.