Import function from another page-CodePudding

I need to call function resetToken() from another page when i click on button. resetToken() should change useState to generate new code. I don't know how to import this function to another page and use it.

I have import import Captcha from '../../../components/Captcha/Captcha'; and displayed with <Captcha/> in return( ... )

So when i click on button I need to call function resetToken() to generate new code or call again import because I have in <Captcha/>

    React.useEffect(() => {
            resetToken();
         },[]);

This code is Captcha.jsx

import React from 'react';
import './Captcha.css';

function Captcha({statusOfCaptcha}){
    const [status, setStatus] = React.useState(undefined);
    const [code, setCode] = React.useState(undefined);
    const [text, setText] = React.useState("");
    const [seconds, setSeconds] = React.useState(120);

    function resetToken(){
        //generate code
        var codeGenerated = "";
        var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789";
        for (var i = 0; i < 6; i  ){
            codeGenerated  = possible.charAt(Math.floor(Math.random() * possible.length));
        }
        setCode(codeGenerated);
        //reset every 120 second
        setInterval(function(){
            var codeGenerated = "";
            var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789";
            for (var i = 0; i < 6; i  ){
                codeGenerated  = possible.charAt(Math.floor(Math.random() * possible.length));
            }
            setCode(codeGenerated);
            setSeconds(120);
            setStatus(undefined);
            setText("");
         }, 120000);
         const interval = setInterval(() => {
            setSeconds(seconds => seconds - 1);
          }, 1000);
          return () => clearInterval(interval);
    }

    React.useEffect(() => {
        resetToken();
     },[]);

  function checkCaptcha(e){
    if(e === code){
        setStatus(true);
        statusOfCaptcha(true);
    } else{
        setStatus(false);
        statusOfCaptcha(false);
    }
  }
  return (
    <div className='captcha'>
        <div className="background">
            <p onCopy={(e) => e.preventDefault()} className="unselectable">{code}</p>
            <a>{seconds}</a>
        </div>
        <div className='input-captcha'>
            <input type="text" placeholder="Zadejte kód" value={text} onChange={(e) => {checkCaptcha(e.target.value); setText(e.target.value)}}/>
            {status === false && (<i class='bx bx-x text-color-red'></i>)}
            {status === true && (<i class='bx bx-check text-color-green'></i>)}
        </div>
    </div>
  )
}
export default Captcha;

This code is index.jsx

    import React from 'react'
    import Captcha from '../../../components/Captcha/Captcha';
   
    function Index() {

      function change(){
          //here i need to call function from Captcha.jsx - resetToken();
      }

      return (
        <div>
          <Captcha statusOfCaptcha={resCaptchaData}/>
          <button onclick={change}>Reset captcha code</button>
        </div>
      )
    }
    export default Index

CodePudding user response：

It would be better to use a custom hook, to store your state, and resetToken function, So you can use it in multiple places.

For more resources about custom hooks. https://reactjs.org/docs/hooks-custom.html

CodePudding user response：

You can do this in several ways

for example you can use state manager like context api or redux. In order to have access to your states or functions everywhere and in all pages and components

Or you can put the resetToken function in the parent component and have access to it in the child components.

    export const ParentComponent = (children) => {
           function resetToken {
             ....
           }
    return (
       <Recapcha resetToken={resetToken} />
    )
   }
    
   



const Recapcha = ({resetToken}) => {
  
          return (...)
}