Question 172708 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can variables be passed to React handler in TypeScript?

I wanted to pass a variable (SearchBoolean) to be logged everytime a button handler function is invoked. So I did this:

type SearchFormProps = {
    styles: React.CSSProperties;
    classNames: string;
};

const onSubmitHandler=(event: React.SyntheticEvent, isSearched?:boolean)=>{
  event.preventDefault();
   const target = event.target as typeof event.target & {
      username: { value: string };
    };
  const username = target.username.value; 
  console.log(username, isSearched);
}

export const SearchForm=({classNames, styles}: SearchFormProps)=>{
  const SearchBoolean = useContext(SearchBooleanContext);
  const {isSearched, setIsSearched} = SearchBoolean;
  // console.log('SearchBooleans', isSearched);
  return (
    <div>
      <Form onSubmit={()=>onSubmitHandler(event, isSearched)}>
      <Form.Group className="mb-3" controlId="formBasicUsername">
        <Form.Control type="text" placeholder="Enter username" name="username" />
      </Form.Group>
      <Button variant="primary" type="submit" >
        Search
      </Button>
      </Form>
    </div>
   
  );
}

but this only gave me error that the event is deprecated and not assignable. If I removed the event from the callback, it still persists to require me passing two arguments. I assigned "?" optional on argument event, but it just made it worst. Please help.

Thank you.

Tags:

2

Answers


  1. 0

    The error you’re experiencing is because you’re passing the event object incorrectly to the onSubmit handler. In your code, you’re not explicitly passing the event object to the onSubmitHandler function.

     <Form onSubmit={(event)=>onSubmitHandler(event, isSearched)}>
    Login or Signup to reply.
  2. 0

    It seems that you are encountering an issue with passing the isSearched variable to the onSubmitHandler function when handling the form submission. The error you mentioned regarding the event being deprecated and not assignable might be due to the way you’re using the event in the arrow function. To fix this, you can modify your code as follows:

    type SearchFormProps = {
  styles: React.CSSProperties;
  classNames: string;
};

const onSubmitHandler = (event: React.FormEvent<HTMLFormElement>, isSearched?: boolean) => {
  event.preventDefault();
  const target = event.target as typeof event.target & {
    username: { value: string };
  };
  const username = target.username.value;
  console.log(username, isSearched);
};

export const SearchForm = ({ classNames, styles }: SearchFormProps) => {
  const SearchBoolean = useContext(SearchBooleanContext);
  const { isSearched, setIsSearched } = SearchBoolean;

  return (
    <div>
      <Form onSubmit={(event) => onSubmitHandler(event, isSearched)}>
        <Form.Group className="mb-3" controlId="formBasicUsername">
          <Form.Control type="text" placeholder="Enter username" name="username" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Search
        </Button>
      </Form>
    </div>
  );
};

    Here’s what has been changed: – The event type for onSubmitHandler has been updated to React.FormEvent to match the type of the onSubmit event. – The event parameter is now passed correctly to the onSubmitHandler arrow function. – The optional isSearched parameter is maintained in case it is needed in other parts of your code. With these modifications, the isSearched variable should be passed correctly to the onSubmitHandler function when the form is submitted.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search