I am making the front-end side of an application that controls home appliances with a website using React.js.

I want to reflect the camera position obtained from the backend to the radio button

Below is the code, but the radio button is not checked and I do not know the cause. enter image description here

In the console I can see the information in the camera_position variable. enter image description here

Json

{
    "attributes": {
        "camera": [
            {
                "entity_id": "camera_2",
                "mode": "Away",
                "state": "Away",
            },
        ],
}

React.js

const { entity_id } = useParams();
const [camera_position, setCameraPosition] = 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)
      setCamera(result.data.attributes.camera);  
      setCameraPosition(result.data.attributes.camera.filter(c => c.entity_id === entity_id).map((item,i) =>  item.mode)); 
    })
    .catch(err => {
      console.log(err);
    });
}

const setCameraHome = async(data) => {
    await axios.post('xxx.com/camera/set_home',
    {
      entity_id: entity_id, 
    },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        console.log('Set Home!');
        setCameraPosition('Home');
        getDevices();
      })
      .catch(err => {
        console.log('Missed Set Home!');
        console.log(err);
      });
}

const setCameraAway = async(data) => {
    await axios.post('xxx.com/camera/set_away',
    {
      entity_id: entity_id, 
    },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        console.log('Set Away!'); 
        setCameraPosition('Away');
        getDevices();
    
      })
      .catch(err => {
        console.log('Missed Set Away!');
        console.log(err);
      });
}

 
return (
        <div>
          <input
            type="radio"
            value="Home"
            onChange={setCameraHome}
            checked={camera_position === 'Home'}
          />
          <input
            type="radio"
            value="Away"
            onChange={setCameraAway}
            checked={camera_position === 'Away'}
          />
        </div>
)

CodePudding user response：

In this line:

setCameraPosition(result.data.attributes.camera.filter(c => c.entity_id === entity_id).map((item,i) =>  item.mode));

map will return an array [] and set it in camera_position. Not a string.

You have to access it using the index or handle the array in a checked property.

CodePudding user response：

<div>
  <input
    type="radio"
    value="Home"
    onChange={setCameraHome}
    checked={camera_position[0] === 'Home'}
  />
  <input
    type="radio"
    value="Away"
    onChange={setCameraAway}
    checked={camera_position[0] === 'Away'}
  />
</div>

works!