Pass an Additional Parameter Into onChange Function React

Question

I'm trying to pass a spare boolean parameter into an onChange handler in ReactJS. The idea is, in a soccer match, the frontend will add match events as they happen (corners in this case). The idea is the boolean homeOrAway will represent whether the corner is awarded to the home or away team.

Here's the JSX and hooks:

  const [homeCorners, setHomeCorners] = useState(0);

        <Form>
          <Form.Group controlId="homeCorners"></Form.Group>
          <Form.Label>Home Corners</Form.Label>
          <Form.Control
            type="number"
            id="homeCornersInput"
            name="homeCorners"
            step="1"
            value={homeCorners}
            min="0"
            max="50"
            style={{
              width: "82.5px",
            }}
            onChange={(e) => adjustCorners(true)}
          ></Form.Control>
        </Form>

And here is the adjustCorners function. I've tried a curried function but it doesn't seem to work:

 function adjustCorners(homeOrAway) {
    let updatedMatchEvents = [...matchEvents];
    let cornerEvent = {
      isHome: homeOrAway,
      eventType: 1,
      playerId: 0,
      period: 1,
      minute: 0,
      second: 0,
    };

    return (event) => {
      if (homeOrAway === true) {
        if (event.target.value < homeCorners) {
          updatedMatchEvents.pop();
          setMatchEvents(updatedMatchEvents);
        } else {
          updatedMatchEvents.push(cornerEvent);
          setMatchEvents(updatedMatchEvents);
        }
      } else {
        if (event.target.value < awayCorners) {
          updatedMatchEvents.pop();
          setMatchEvents(updatedMatchEvents);
        } else {
          updatedMatchEvents.push(cornerEvent);
          setMatchEvents(updatedMatchEvents);
        }
      }
    };
  }

I've also tried just using a basic arrow function, but it doesn't seem to work either. I'm able to print to the console but the Form doesn't increment or decrement:

const adjustCorners = (homeOrAway, corners) => {
    let updatedMatchEvents = [...matchEvents];
    let cornerEvent = {
      isHome: homeOrAway,
      eventType: 1,
      playerId: 0,
      period: 1,
      minute: 0,
      second: 0,
    };

    if (homeOrAway === true) {
      if (corners < homeCorners) {
        updatedMatchEvents.pop();
        setMatchEvents(updatedMatchEvents);
      } else {
        updatedMatchEvents.push(cornerEvent);
        setMatchEvents(updatedMatchEvents);
      }
    } else {
      if (corners < awayCorners) {
        updatedMatchEvents.pop();
        setMatchEvents(updatedMatchEvents);
      } else {
        updatedMatchEvents.push(cornerEvent);
        setMatchEvents(updatedMatchEvents);
      }
    }
  };

Answer 1

According to your logic, adjustCorners return a function therefore you need to pass a value to it.

Moreover, you should pass the actual value and not the event object, due to how Synthetic events works in React.

// Rewrite adjustCorners to use the value and not reference the event.
onChange={(e) => adjustCorners(true)(e.target.value)}

// BUG, DON'T DO IT, READ ABOUT SYNTHETIC EVENTS
onChange={(e) => adjustCorners(true)(e)} // !! BUG CAREFUL

Rewrite Example:

function adjustCorners(homeOrAway) {
  let updatedMatchEvents = [...matchEvents];
  let cornerEvent = {
    isHome: homeOrAway,
    eventType: 1,
    playerId: 0,
    period: 1,
    minute: 0,
    second: 0,
  };

  // Not event.target.value, pass the value
  return (value) => {
    if (homeOrAway === true) {
      if (value < homeCorners) {
        updatedMatchEvents.pop();
        setMatchEvents(updatedMatchEvents);
      } else {
        updatedMatchEvents.push(cornerEvent);
        setMatchEvents(updatedMatchEvents);
      }
    } else {
      if (value < awayCorners) {
        updatedMatchEvents.pop();
        setMatchEvents(updatedMatchEvents);
      } else {
        updatedMatchEvents.push(cornerEvent);
        setMatchEvents(updatedMatchEvents);
      }
    }
  };
}