currying.jsx

import React, { useState } from 'react';
function MyComponent() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  // This function is curried and it's a closure because it has access to the setFirstName and setLastName functions
  // which are defined in the parent scope
  const handleChange = (setter) => (event) => {
    setter(event.target.value);
  };
  return (
    <>
      <input
        type='text'
        placeholder='First Name'
        onChange={handleChange(setFirstName)}
      />
      <input
        type='text'
        placeholder='Last Name'
        onChange={handleChange(setLastName)}
      />
      <p>
        Name: {firstName} {lastName}
      </p>
    </>
  );
}
export default MyComponent;