Question: I have a use effect which is supposed to keep a button disabled until a row on a table has been clicked, then the button will be clickable. For some reason, it is not updating the state. I put a console log in the 'if' part of my use effect to check it was even getting to that bit and the console log prints out fine so I am not sure as to why the button will not change.

```
const [disabledSubmitFormButton, setDisabledSubmitFormButton] = useState(false)

const [selectedOptions, setSelectedOptions] = useState([{
        name: '',
        age: '',
        city: '',
    }])

useEffect(() => {
        if (selectedOptions.length > 0) {
            setDisabledSubmitFormButton(false)
            console.log("hiiii")
        } else {
            setDisabledSubmitFormButton(true)
        }
    }, [selectedOptions])

```

And the button is listening out for the submitFormButton state like so -

```
<Button disabled={submitFormButton}>Submit</Button>

```

I have a table with rows in it, when the user select a row in the table, this is when the button should turn clickable and not be disabled. When the user clicks off the table, the button should be disabled again.

```
<DataTable value={optionsContext.list} header={header} sortField="id" sortOrder={-1} globalFilter={globalFilter} selectionMode="multiple"
                    selection={selectedOptions} onSelectionChange={e => setSelectedOptions(e.value)}>
                    <Column className="table-column" field="name" header="Name" sortable filter filterPlaceholder="Search by Name" />

etc. 

```

Answer: 
Note, that you have `selectedOptions` in the dependency array of your useEffect.
It means that it will run once upon component init and will never run again until the `selectedOptions` change. That is why you can see console log for one time.

```
useEffect(() => {
        if (selectedOptions.length > 0) {
            setSubmitFormButton(true)
            console.log("hiiii")
        } else {
            setSubmitFormButton(false)
        }
    }, [selectedOptions]) // <-- here it is

```

So I assume that when user clicks on the options you actually do not change them, or change and item inside of `selectedOptions` array but the reference to the array is still the same, so React doesn't consider it as a change. In order to trigger react properly in this case you need to update `selectedOptions` state with a new array.

For example your `handleClick` function can look like this:

```
handleClick() {
   setSelectedOptions([...selectedOptions]) // <-- new array is passed 
}

```

Note, that in the example above I just replace array with a new one with the same content. In real app you will probably need to update items inside, so you can use `.map()` method, or any other approach which will return new array with updated items inside.
Just create a func like this and pass it somewhere where you want yo call it.

```
const aFunction = () => {
  ..
  ..
  .. // make the changes

  setSubmitFormButton(false or true);
}

```