How to change displayed text in react component?-CodePudding

I installed react-mailchimp-subscribe and I want to change text button because my website is not written in English. i putted this component into div className="pokemon" to have access to him like .pokemon > div > button and could have change styles. Now I want to change text. I try to acces to him by using

useEffect(() = > {
document.addEventListener("load", function(){
(".pokemon>div>button").innerHtml("Wyślij")
}); }, [])

but I guess in my function is too many errors that it actually work.

CodePudding user response：

You can update the button label using the state. Please refer the below code

import React, { useEffect, useState } from 'react'

export default function App() {
  const [buttonLabel, setButtonLabel ] = useState("I'm Button");

  useEffect(() => {
    setButtonLabel("Wyślij")
  }, [])

  return (
      <div className="pokemon">
      <div>
        <button> {buttonLabel}</button>
      </div>
    </div>
    )
}

Here is the link to codesandbox environment

CodePudding user response：

If you want to do it using dom, you can use the below code.

You have some minor syntax mistake.

useEffect(() = > {
document.addEventListener("load", function(){
document.querySelector(".pokemon").querySelector("div").querySelector("button").innerHTML = "Wyślij";
}); }, [])