Syntax error when using react.js Ref to call a function

 x Expected ',', got '.'
    ,-[E:\projects\Coding Stuff\MyThing\thingymajig\src\pages\MainMenu.js:13:1]
 13 |
 14 |
 15 |         function BeginTransaction(
 16 |                             inputRef.current.classList.add("is-active")
    :                                     ^
 17 |                       )

Using mainly bulma and react to make a page of sorts, im looking to call the Begintransaction function in order to open a modal. Im not sure what im doing wrong with the syntax as it seems to be in order but obviously not

import'bulma/css/bulma.css'
import { useRef } from "react"


    
 export default function MainMenu() {
    
      
        const inputRef = useRef(null);
        return (

            
            
        
        function BeginTransaction(
                            inputRef.current.classList.add("is-active")
                      )

        

            <html>
  
                  <body>
                  <div class="modal" ref ={inputRef} id = "WalletEntry">
                      <div class="modal-background"></div>
                          <div class="modal-content">
                          <div class="field">
                              <label class="label">Enter your wallet address</label>
                              <div class="control">

                                <input class="input" type="text" SenderAddress="Text input"/>
                                <button class="button">Enter Address</button>
                              </div>
                              
                              <button class="button">Go back to selection</button>
                            </div>
                          </div>

                      </div>
                    
                      <div class="tile is-ancestor">
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                
                                 <h3>Ethereum Mainnet</h3>
                                 <figure> 
                                <input onClick={BeginTransaction()}type="image" src="Images/eth.jpg" />    
                                </figure>
                                <div>
                                Advanced deposits with uniswap
                                </div>

                                </div>
                                
                                </div>
                            </div>
                            
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                

                                 hello
                                <img src="https://bulma.io/images/placeholders/128x128.png"/>
                                </div>
                                </div>
                            </div>
                            
                            <div class="tile">
                            <div class="tile is-10 is-vertical is-parent">
                                <div class="is_child box is-danger">
                                

                                 hello
                                <img src="https://bulma.io/images/placeholders/128x128.png"/>
                                </div>
                                </div>
                            </div>
                      </div>
                      
                      
                      
                      

                  </body>
            </html>
      )}

Im trying to call a modal with a ref to activate it the modal in question is made at the top of the body.

Solution

You put the body of the function inside the parameters.

Also, that function should be moved before the return and switched to an inline function

const inputRef = useRef(null);

const BeginTransaction = () => {
    inputRef.current.classList.add("is-active")
};

return (
    /* your elements here */
);