Question 189947 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Update the UI based on backend data and re render and view programmatically set data on React?

I’m trying to update the CheckboxInput value based on the value I receive via the backend API calls data. As per the below code value.locked (boolean) to set in the UI and dispatch its respective dispatcher. Everything work well but setting the checkbox to check does not work. Basically, the UI does not update. Reducer state updates.

If anyone can share a working sample is much appreciated

   import { useReducer, useRef } from 'react'
    
   export const StatusViewFilters = () => {
        const dispatch = useDispatch()
        const tagsList = useSelector(selectStartpointsStatusTagsList)
        const usersList = useSelector(selectStartpointsStatusUsersList)
        const filter = useSelector(selectStartpointStatusFilter)
        const savedFilters = useSelector(selectStartpointsStatusFilters)
        const pagedMetadata = useSelector(selectStartpointStatusPagedMetadata)
        const [searchText, setSearchText] = useState();
        const refContainer = useRef(null);
        const inputRef = useRef(null)
    
        useEffect(() => {
            dispatch(getTagsList())
            dispatch(getAllUsers())
            dispatch(getAllFilters())
    
        }, [])
    
        const search = el => {
            dispatch(getStartPointSagaStatusList({ ...filter, ...pagedMetadata }))
        }
    
        useEffect(() => {
            search()
        }, [filter])
    
        const { t } = useTranslation()



    // To Do set and update react UI and state accordingly
    const setStatusAccordingToSavedFilter = (value) => {
        console.log(value);
        if (value.locked) {
    
            // wants to set the value of the checkbox to check
            
            // This doesn't work ChceckboxInput does not change the check box to check 
               state based on the value.locked?
           
            console.log(JSON.stringify(this.inputRef))
            this.inputRef.CheckboxInput.checked =true
            document.getElementById("123").checked = true;
            dispatch(setStartPointSagaStatusLockedSearchFilter(value.locked))
        }
        if (value.searchByFreshness) {
            dispatch(setStartPointSagaStatusFreshnessFilter(value.searchByFreshness))
        }
    };

    <div>
        <CreatableSelect
         Id="123"
         placeholder={t('Saved filters drop down')}
         onChange={el => {
         const filters = el.data[0]
         setStatusAccordingToSavedFilter(filters)}}
          options={savedFilters} />
      </div>

 

    <div className="border rounded flex">
         <CheckboxInput
    
          ref={inputRef}
          change={(checked) => {
                                        
          dispatch(setStartPointSagaStatusLockedSearchFilter(checked))
          }}
          label={t('locked')} />
     </div>

}
Tags:

2

Answers


  1. 0

    You shouldn’t be modifying the DOM directly in a React app. Use a selector to get the current locked state and set checked directly on the checkbox when your component renders.

    const isLocked = useSelector(...)

<CheckboxInput
  checked={isLocked}
  change={(checked) => {                          
    dispatch(setStartPointSagaStatusLockedSearchFilter(checked))
  }}
  label={t('locked')}
/>
    Login or Signup to reply.
  2. 0

    the best approach is to bind the checked property of CheckboxInput to a state:

    const initialValue = useSelector(...)
const [isChecked, setIsChecked] = useState(initialValue);
//...
<CheckboxInput
  checked={isChecked}
  onChange={(checked) => {
    setIsChecked(checked);
   //... additional work
  }}
/>;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search