how to compare a string with object value-CodePudding

I have one object I want to compare that key value with string yes or no I am trying to reach it but that is not working correctly need to compare that and then the radio button will get checked with accordingly yes or no need to handing change with that also.

const screenJson = {
  Management: "yes",
  Configuration: "no",
  Rule: "no",
  Initiate: "yes",
  DM: "no",
  Download: "yes",
  Dashboard: "no",
}
const [selectedValue, setSelectedValue] = React.useState(screenJson);
// ...
  const handleChange = (event) => {
    const copyOfModuleSubModules = _.cloneDeep(screenJson);
    Object.keys(copyOfModuleSubModules[event.target.name]).forEach(
      (item) => {
        copyOfModuleSubModules[event.target.name][item] =
          event?.target?.value;
      }
    );
    setSelectedValue({
      ..._.cloneDeep(copyOfModuleSubModules),
    });
  };
<>
  {
    Object.keys(screenJson)?.map((data, index) => (
      <Grid item key={index} mt={2} xs={12} container>
        <Grid item xs={6} mt={2} textAlign="left">
          <Typography variant="body1">{data}</Typography>
        </Grid>
        <Grid item xs={3}>
          {JSON.stringify(
            Object.values(screenJson)
              .filter(data => data)
              .toString() === "yes"
          )}
          <Radio
            checked={
              Object.values(screenJson)
                .filter(data => data)
                .toString() === "yes"
            }
            onChange={handleChange}
            value="a"
            name={data}
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
        <Grid item xs={3}>
          <Radio
            checked={screenJson?.[Object.keys(screenJson)] === "no"}
             onChange={handleChange}
            value="b"
            name={data}
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
      </Grid>
    ))
  }
</>

CodePudding user response：

Use this to evaluate if checked is true or false

screenJson[data] === "yes"
or
screenJson[data] === "no"

Complete

{Object.keys(screenJson)?.map((data, index) => (
  <Grid item key={index} mt={2} xs={12} container>
    <Grid item xs={6} mt={2} textAlign="left">
      <Typography variant="body1">{data}</Typography>
    </Grid>
    <Grid item xs={3}>
      {JSON.stringify(
        Object.values(screenJson)
          .filter((data) => data)
          .toString() === 'YES'
      )}
      <Radio
        checked={
          screenJson[data] === "yes"
        }
        // onChange={handleChange(index)}
        value="a"
        name="radio-buttons"
        inputProps={{ 'aria-label': 'A' }}
      />
    </Grid>
    <Grid item xs={3}>
      <Radio
        checked={
          screenJson[data] === "no"
        }
        // onChange={handleChange}
        value="b"
        name="radio-buttons"
        inputProps={{ 'aria-label': 'A' }}
      />
    </Grid>
  </Grid>
))}

CodePudding user response：

you can use Object.entries() for more less loop and problem

<>
  {
    Object.entries(screenJson)?.map((data, index) => (
      <Grid item key={index} mt={2} xs={12} container>
        <Grid item xs={6} mt={2} textAlign="left">
          <Typography variant="body1">{data[0]}</Typography>
        </Grid>
        <Grid item xs={3}>
          {JSON.stringify(data[1] === "yes")}
          <Radio
            checked={
              data[1] === "yes"
            }
            onChange={handleChange(index)}
            value="a"
            name="radio-buttons"
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
        <Grid item xs={3}>
          <Radio
            checked={data[1] === "no"}
            // onChange={handleChange}
            value="b"
            name="radio-buttons"
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
      </Grid>
    ))
  }
</>

CodePudding user response：

Here is a working example for your question.!!

  const screenJson = {
  Management: "yes",
  Configuration: "no",
  Rule: "no",
  Initiate: "yes",
  Initial: "no",
  Download: "yes",
  Dashboard: "no",
}

export default function App() {
  const handleChange = () => {
    console.log('hello');
  }
  return (
    <div className="App">
    
    {
    Object.keys(screenJson)?.map((data, index) => (
      <Grid item key={index} mt={2} xs={12} container>
        <Grid item xs={6} mt={2} textAlign="left">
          <Typography variant="body1">{data}</Typography>
        </Grid>
        <Grid item xs={3}>
          {screenJson[data] === 'yes' ? 'true' : 'false'}
          {/* {JSON.stringify(
            Object.values(screenJson)
              .filter(data => data)
              .toString() === "yes"
          )} */}
          <Radio
            checked={
              screenJson[data] === 'yes'
            }
            onChange={handleChange(index)}
            value="a"
            name="radio-buttons"
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
        <Grid item xs={3}>
          <Radio
            checked={screenJson?.[Object.keys(screenJson)] === "no"}
            // onChange={handleChange}
            value="b"
            name="radio-buttons"
            inputProps={{ "aria-label": "A" }}
          />
        </Grid>
      </Grid>
    ))
  }
    </div>
  );
}

CodePudding user response：

Try

Object.keys(screenJson).map(data=> {
    <Radio
        checked={
          screenJson[data]==='yes'
        }
        value="a"
        ...
     />

    <Radio
        checked={
          screenJson[data]==='no'
        }
        value="b"
        ...
     />

}