Problem with CEF React

[Whiteeee]

Hi I have a problem with my react project I am making  login pane rnl and when I want to click a button my browser freezes
```
In Google chrome all works well

mp.events.add('guiReady', () => {

    loginPanel =  mp.browsers.new('package://build/index.html')

})

 

mp.keys.bind(0x12, true, () => {

    let state = !mp.gui.cursor.visible

    mp.gui.cursor.show(state, state)

})
 

      <div className="mainSection">

        <div className='topLane'> </div>

        <div className='midLane'>

          <h1>Witaj!</h1>

          <span>Zaloguj się na konto</span>

          {loginInputs()}

          <span style={{ cursor: 'pointer' }}>Nie pamiętam hasła</span>

        </div>

        <div className='botLane'>

          <button>Zaloguj się</button>

          <button onClick={() => setSection('register')}>Rejestracja</button>

        </div>

      </div>

[Slaurusse]

provided too cutted code, nothing can do.

[Whiteeee]

On 3/13/2024 at 9:06 PM, Slaurusse said:

provided too cutted code, nothing can do.

ok so it's full code of react

function App () {

  const [section, setSection] = useState('login');

  const [login, setLogfromLogging] = useState('');

  const [password, setPassword] = useState('');

  const [registerLogin, setRegisterLogin] = useState('');

  const [registerPassword, setRegisterPassword] = useState('');

  const [replayPassword, setReplayPassword] = useState('');

  const [termsState, setTermsState] = useState(false);

  const [buttonDisabledState, setButtonState] = useState(true);

 

  const doRegister = () => {

    const valuesStatements = { loginLength: registerLogin.length, passwordLength: registerPassword.length, replayPassword: replayPassword.length };

    if (registerPassword !== replayPassword) {

      alert("Passwords don't match");

      return;

    }

    if (valuesStatements.loginLength < 3 || registerPassword.length < 4 || replayPassword.length < 4) {

      alert('You have to provide at least 3 characters in Login and at least 4 characters in Password!');

      return;

    };

    //@ts-ignore

    mp.trigger("transferRegister", registerLogin, registerPassword, replayPassword);

 

  };

 

  const renderSection = (section: string) => {

    if (section === 'login') {

 

      return renderLoginSection();

    } else {

      return renderRegisterSection();

    }

  };

  const loginInputs = () => {

    return (<><input type="text" placeholder='Login' onChange={(e) => { setLogfromLogging(e.currentTarget.value); }} value={login} /><input type="password" placeholder='Hasło' onChange={(e) => { setPassword(e.currentTarget.value); }} value={password} /></>);

  };

  const closeTermsReleaseButton = () => {

    setTermsState(false);

    setButtonState(false);

  };

  const renderLoginSection = () => {

    return (

      <div className="mainSection">

        <div className='topLane'> </div>

        <div className='midLane'>

          <h1>Witaj!</h1>

          <span>Zaloguj się na konto</span>

          {loginInputs()}

          <span style={{ cursor: 'pointer' }}>Nie pamiętam hasła</span>

        </div>

        <div className='botLane'>

          <button>Zaloguj się</button>

          <button onClick={() => setSection('register')}>Rejestracja</button>

        </div>

      </div>

    );

  };

 

  return (

    <div className="App">

      <div className="header">

        {termsState ? renderTerms() : ''}

 

        <div className="characterImage">

          <img alt='Characters' src={require('./image/characters/1.png')} className="renderCharacter"></img>

        </div>

        {renderSection(section)}

      </div>

    </div>

  );

};

 

export default App;

 

//do function