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

Leave a Reply