jQuery UI Widgets Forums React jQWidgets unable to read useState() variables in React function components

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 4 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • mfearby
    Participant

    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.


    Hristo
    Participant

    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

    • This reply was modified 4 years, 9 months ago by  Hristo.

    mfearby
    Participant

    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.


    Hristo
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.