How to disable checkbox in Component based on certain condition in React?

Question

In a React project I've certain records fetched from API. All the records have their respective checkboxes. I want to disable certain checkboxes based on specific condition. Consider following code for better clarity.

const data = [
    { testId: 123, dataId: "44", cycleId: "5050", valid: "N" },
    { testId: 323, dataId: "54", cycleId: "6660", valid: "N" },
    { testId: 444, dataId: "44", cycleId: "4340", valid: "Y" },
    { testId: 134, dataId: "40", cycleId: "5150", valid: "N" },
    { testId: 222, dataId: "42", cycleId: "5050", valid: "Y" },
    { testId: 552, dataId: "38", cycleId: "3244", valid: "Y" }
  ];

Above is the mock data created for sample use. I'm populating the same in a component as below

function CheckboxComp({ data, handleChange }) {
  return (
    <div>
      {data.map((obj) => {
        const { testId } = obj;
        return (
          <label for={testId}>
            {testId}
            <input
              name={testId}
              type="checkbox"
              value={testId}
              disabled={data.valid == "N" ? true : false}
              onChange={handleChange}
            />
          </label>
        );
      })}
    </div>
  );
}

As you can see, all data is mapped in the component. Here I want to disable all the invalid data flagged as 'N', but, it doesn't work. What could be the best solution to tackle this problem?

Please refer to the codesandbox link: https://codesandbox.io/s/pensive-greider-npfdoz?file=/src/CheckOption.js

sms · Accepted Answer · 2022-08-18 06:52:26Z

1

Its not data.valid .. its obj.valid in Input field

          <input
              name={testId}
              type="checkbox"
              value={testId}
              disabled={obj.valid == "N" ? true : false}
              onChange={handleChange}
            />

answered Aug 18, 2022 at 6:52

sms

1,4401 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable checkbox in Component based on certain condition in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related