jQWidgets unable to read useState() variables in React function components

[mfearbyParticipant]

I’m trying to use jQWidgets in React function components and I can’t get a click handler called from a JqxButton to read the values of a useState() variable, but a plain HTML button that calls the same handler can read those values.

Here’s a codesandbox demonstrating the problem. It’s using a JqxCheckBox change event (which also suffers the same problem) because I’m getting CORS errors using JqxButton’s on codesandbox for some reason.

It makes no difference whether I call the setName() function from a plain HTML input or a JqxInput. Could this be a bug?

Here’s my component code:

import React, { useState } from 'react';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import JqxInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';

const Useless: React.FC = () => {
    const [name, setName] = useState('');

    const onShowNameClicked = () => {
        alert('Name is: ' + name);
    };

    const onNameChanged = (e: any) => {
        console.log('setting name: ' + e.target.value);
        setName(e.target.value);
    };

    return (
        <div>
            <p>Plain HTML:</p>
            <input
                type="text"
                onChange={onNameChanged}
                value={name}
                placeholder="Enter a name"
            />
            <p>
                <button onClick={onShowNameClicked}>Show Name</button>
            </p>

            {/*<p>jQWidgets button:</p>
             <JqxButton onClick={onShowNameClicked} theme="bootstrap">
                Show Name
            </JqxButton> */}
            <p>jQWidgets:</p>
            <JqxInput placeHolder="Enter a name" onChange={onNameChanged} />
            <p>
                <JqxCheckBox theme="bootstrap" onChange={onShowNameClicked}>
                    Show Name
                </JqxCheckBox>
            </p>
        </div>
    );
};

export default Useless;

Thanks.

[HristoParticipant]

Hello mfearby,

Thank you for your interest.
I try to recreate your example based on this tutorial.
After some testings I would like to suggest you try to use this workaround below:

function App() {
  let [name, setName] = useState('');

  const onShowNameClicked = () => {
      alert('Name is: ' + name);
  };

  const onNameChanged = (e: any) => {
      name = e.target.value;
      setName(e.target.value);
  };

  return (
      <div>
          <JqxInput placeHolder="Enter a name" onChange={onNameChanged} />

          <JqxButton onClick={onShowNameClicked}>
              Show Name
          </JqxButton>     
      </div>
    )
};

export default App;

I hope you find this useful.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mfearbyParticipant]

Thanks for the solution, of sorts. Doesn’t changing the useState variables from ‘const’ to ‘let’ kind of break the intent of React function components? For now I’m using plain HTML buttons because it seems safer than doing things in a “non-React” way to workaround this strange JqxButton behaviour.

I appreciate your time, though. Thanks.

[HristoParticipant]

Hello mfearby,

It is normal to use let when you change the declared variable.
The meaning of the const is to be a constant (unchangeable) but you change it in the event.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts