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);
      }
    }
  };

Dennis Vash · Accepted Answer · 2021-05-10 07:31:05Z

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);
      }
    }
  };
}

edited May 10, 2021 at 7:31

answered May 10, 2021 at 7:21

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

clattenburg cake Over a year ago

Thanks Dennis. I'm not sure what you mean by rewriting adjustCorners to use the value though, can you provide an example?

Collectives™ on Stack Overflow

Pass an Additional Parameter Into onChange Function React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related