Import Once Javascript

Asked

Viewed 56 times

0

I have two components in my Reactjs project, which use google recaptcha. However, as there are two, each time I call him it’s as if he understood that I wanted to load the "import Recaptcha from 'React-recaptcha';" I wanted to know how to import only the first time, because when I go to the second component that uses it, it gives an error saying that: reCAPTCHA has already been rendered in this element

javascript react google recaptcha

  • Do the two components render the recaptcha? Is there a need for the two render? There are life cycle methods that you can control what to do before and after the component is assembled.

1 answer

0

all right? You didn’t post an excerpt of your code, so I’m going to assume that these two components are separate, of course, and being called by another component, like this: Index ->Comp1 ->Comp2

The ideal would be to use Index to call Recaptcha. I haven’t used this function yet, but it would be something like this:

// index.js ou outro arquivo de entrada
import React, { Component } form 'react';
import Recaptcha from 'react-recaptcha;
import Component1 from '../seu_caminho';
import Component2 from '../seu_caminho'

export default class Index extends Component {
  handleRecaptcha = (algumParametro_ou_nao) => {
    // Funcao que vai chamar o recaptcha e retornar algo
  }

  render () {
    return (
      <Compoment1 handleRecaptcha={() => this.handleRecaptcha()} /> // se tiver parametros passe ali nos parenteses
     <Component2 /> // Se precisar, passe a função recaptcha aqui tbm
    );
  }
}

Inside each component this function becomes a Props there is only call with this.props.handleRecaptcha() I hope this helps you. Up until.

Browser other questions tagged javascript react google recaptcha

You are not signed in. Login or sign up in order to post.