mercredi 2 septembre 2020

Change/control checkbox checked state depending on the data resolved from the promise

What I want is when I clicked the checkbox and the resolve data in a promise is false. I want the checkbox to stay its check state to not checked. If the data is true then the checkbox check state is checked.

I have created a simple codesandbox for this. I am using react and mdc component for checkbox. There is no error I just want to control the state of my checkbox.

To be more convenient to you here I post the code here but if you want to play with it I suggest visiting the link.

import React, { useState } from "react";
import "./styles.css";
import Checkbox from "@material/react-checkbox";

export default function App() {
  const [verified, setVerified] = useState(false);

  const promisify = () =>
    new Promise((resolve, reject) => {
      const data = false;
      resolve(data);
    });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="simple-demo">
        <Checkbox
          value={verified}
          onChange={(e) => {
            promisify().then((data) => {
              console.log(data);
              if (data) {
                setVerified(e.target.checked);
              }
            });
          }}
        />
        <label>Verify</label>
      </div>
    </div>
  );
}



Aucun commentaire:

Enregistrer un commentaire