title: How can I do to do mutations using React.js?
body: <p>I am trying to do some mutations using graphql and react.js but I got a problem. Indeed I got the following message :</p>
  <p><code>ESLint: React Hook &quot;useMutation&quot; is called in function &quot;onSubmit&quot; that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.(react-hooks/rules-of-hooks)</code></p>
  <p>But I need to do the mutation when I click to validate the form and for that I need the function &quot;onSUbmit&quot;</p>
  <p>Here is my code :</p>
  <pre><code>import React from &quot;react&quot;;
  import { Modal, Button } from &quot;react-bootstrap&quot;;
  import {useForm} from &quot;react-hook-form&quot;;
  import {gql, useMutation, useQuery} from '@apollo/client';
  import {BrowserRouter, Link, Redirect} from &quot;react-router-dom&quot;;
  
  const Register = (props) =&gt; {
    const { register, handleSubmit, errors  } = useForm();
    const onSubmit = data =&gt; {
      let username = data.Username;
      const GET_ACTIVITY = gql`
      mutation Register($username: String!){
      register(username: $username){
      username
      } 
      }
      `
      const [addchannel, { datas} ] = useMutation(GET_ACTIVITY);
      }
    console.log(props);
  
      return (
        &lt;Modal show={props.show} onHide={props.onClose} centered&gt;
          &lt;div className=&quot;login-form&quot;&gt;
            &lt;h3 className=&quot;h3 mb-3 font-weight-normal&quot; style={{textAlign: &quot;center&quot;}}&gt; Register&lt;/h3&gt;
            &lt;form className=&quot;form-signin&quot; onSubmit={handleSubmit(onSubmit)} &gt;
              &lt;div className=&quot;form-group&quot;&gt;
              &lt;input
                type=&quot;text&quot;
                id=&quot;inputUsername&quot;
                className=&quot;form-control&quot;
                placeholder=&quot;Username&quot;
                required=&quot;&quot;
                autoFocus=&quot;&quot;
                name=&quot;Username&quot;
                ref={register({ required: true})}
              /&gt;
              &lt;button className=&quot;btn btn-outline-success btn-block&quot; type=&quot;submit&quot; &gt;
                &lt;i className=&quot;fas fa-sign-in-alt&quot; /&gt; Register
              &lt;/button&gt;
              &lt;hr /&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      );
    }
  
  export default Register;
  </code></pre>
  <p>Could you help me please ?</p>
  <p>Thank you very much !</p>