How to pass props to radio buttons in React.js - reactjs

Question

In React.js,
The name of the room assigned to each home appliance
is got from the backend and displayed
I am trying to check the room to which the home appliance belongs with a radio button.
What I want to achieve is
I want to check (reflect on) the radio button that matches the room name assigned to each home appliance.
Issue/error message
Nowhere is checked like a photograph below.
in DropDownForRoomChangeButton.js
Since I can confirm that the contents are properly contained with console.log(item.item.room_name)
I wonder why it wasn't checked.
DiscoverCondoRoom.js
const DiscoverCondoRoom = () => {
const [devices, setDevices] = useState([]);
const getDevices = async(data) => {
await axios.get('xxx.com',
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log(result.data)
setDevices(result.data.attributes);
})
.catch(err => {
console.log(err);
});
}
useEffect(() => {
getDevices();
},[]);
const keys = [
"camera",
"climate",
"cover",
"light",
"lock",
"sensor",
"switch",
];
const entities = keys
.map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
.flat();
return (
<>
<div className="row mx-auto text-center">
{entities.map((entity, i) => (
<div className="">
<DropDownForRoomChangeBotton item={entity} />
</div>
</div>
}
</>
);
}
export default DiscoverCondoRoom;
DropDownForRoomChangeButton.js
import Dropdown from 'react-bootstrap/Dropdown';
const cookies = new Cookies();
const DropDownForRoomChangeButton = (item) => {
const [devices, setDevices] = useState([]);
const getDevices = async(data) => {
await axios.get('xxx.com',
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${cookies.get('accesstoken')}`
},
})
.then(result => {
console.log(result.data)
setDevices(result.data.attributes);
})
.catch(err => {
console.log(err);
});
}
const keys = [
"camera",
"climate",
"cover",
"light",
"lock",
"sensor",
"switch",
];
const entities = keys
.map((key) => (devices[key] || []).map((e) => ({ ...e, key })))
.flat();
const roomNames = [...new Set(entities.map((entity) => entity.room_name))];
const [val, setVal] = useState();
console.log(val)
const HomeHandleChange = e => setVal(e.target.value);
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
<button className="btn btn-primary button_table_rightside">Unassigned</button>
</a>
));
useEffect(() => {
getDevices();
setVal(item.item.room_nam)
},[]);
console.log(roomNames)
console.log(item)
console.log(item.item.room_name)
return (
<>
<Dropdown className="room_change_dropdown_top">
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />
<Dropdown.Menu className="room_change_dropdown">
<Dropdown.Item className="room_change_dropdown_item">
{roomNames.map((room_names, i) => (
<div className="flex_radio">
<input
className="room_change_radio"
type="radio"
value={room_names}
onChange={HomeHandleChange}
checked={val === item.item.room_name}
/>
<p className="drop_down_p">{room_names}</p>
</div>
))}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
export default DropDownForRoomChangeButton;
HTML code

Answer 1

Based on your comment, I think you were going for something like this:
const homeHandleChange = e => setVal(e.target.name);
<input
...
name={item.item.room_name}
onChange={homeHandleChange}
checked={val === item.item.room_name}
/>
This way you set the state with the actual name of the room, not value, which in this case is meaningless.
Also, you don't need the useEffect for setting the initial state.
useState accepts a parameter for a default value.
So you can simply do:
const [val, setVal] = useState(item.item.room_name);
And then you can remove that line from the useEffect.
Note: Regular function, (unlike components / etc..), should be named in camel-case, not Pascal-case.
So HomeHandleChange, should actually be homeHandleChange like in the example above.
Obviously you can do whatever you choose but it's a matter of basic convention that's worth following IMO.