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

 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  ref ={inputRef} id = "WalletEntry">
                      <div ></div>
                          <div >
                          <div >
                              <label >Enter your wallet address</label>
                              <div >

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

                      </div>
                    
                      <div >
                            <div >
                            <div >
                                <div >
                                
                                 <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 >
                            <div >
                                <div >
                                

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

                                 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.

CodePudding user response：

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 */
);