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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.