React Radio Buttons Using State and Props

Question

I am following the advice given in this Stack Overflow answer: Trying to Reset a group of Radio button in REACT through a button

But, I cannot get it to work.

I am developing a simple blog webapp for practice and I want to have a radio button on the "Users" UI to specify whether a user has admin privileges or not.

Here are some screenshots of the UI and Chrome Developer Console:

Here is my code:

This is code from my EditUser()

// useState for the isAdmin radio buttons
  const [adminIsTrue, checkedState] = useState(null);

  const getRadioProps = useCallback((id, value) => {
    return {
      id, 
      value,
      type: "radio",
      name: "isAdmin",
      checked: adminIsTrue === value,
      onChange: () => checkedState(value)


    };
  }, [adminIsTrue]);

This is code from my return():

   
              {/* Admin Priveledges */}
            <div>
            <div className="radiobtn">
              <label htmlFor='body'>This user has admin priveledges?</label>
              <br></br>
              <input {...getRadioProps("true", 1)} />
              <label htmlFor="true">True</label>


              <div className="radiobtn">
              <input {...getRadioProps("false", 0)} />
              <label htmlFor="false">False</label>
              </div>
            </div>
            </div>

Both radio buttons give me a developer console output of '1'.

Do any of you know how to get this code working so that the value from my database is reflected in the radio buttons (i.e if isAdmin is "true" in my database, I want the "true" radio button to be checked, but I want to be able to change the radio button values by clicking on them)?

Any ideas?

Kind Regards,

jm03 Melbourne, Australia

I have tried a few methods and none seem to work.

I think this answer can help you. - https://stackoverflow.com/questions/76645348/how-to-manage-react-state-for-reusable-radio-input/76645621#76645621 — Pluto, Jul 11 '23 at 05:04

Humanoid Mk.12 · Answer 1 · 2023-07-11T05:45:49.773

~~useCallback function caches data based on deps which is adminIsTrue in your code. When your component rendered, adminIsTrue is never updated. So, it might cache initial function getRadioProps("true", 1) although you passed new argument to the getRadioProps.~~

I mis-understand above.

Also, in your case, creating reusable components seems appropriate.

For Example,

In the Parent component


const [selectedIdx, setSelectedIdx] = useState(0);

return (
<>
 <Input 
   // ...passing props
   id={0}
   value={selectedIdx}
   onChange={() => setSelectedIdx(0)}
 />
<Input 
   // ...passing props
   id={1}
   value={selectedIdx}
   onChange={() => setSelectedIdx(1)}
 />
</>
)

Child Component (Reusable Component)

const Input = ({
  id = 0, 
  value, // 0 || 1 
  type, 
  onChange, 
  name
  }) => {

  return (
    <input 
      value={value} 
      type={type} 
      checked={value === id} 
      onClick={onChange}
    />
  )

}

Above code could be bad example. But, I just want to tell you that Reusable components are the strength of React.

If you want to set initial data from database.


const fetchData = async () => {
  const rsp = await get(...);

  // it should be 0 || 1;
  const dataFromDatabase = rsp;
  checkedState(dataFromDatabase)
}

useEffect(() => {
  fetchData()
},[]);

Thank you for your answer. Yes, React is very strong with reusability of component. This is my first project using React, so I still have a lot to learn. To be honest, I didn't quite understand your answer fully. Would you care to elaborate? — jm03, Jul 11 '23 at 05:29

React Radio Buttons Using State and Props

1 Answers1