2022-07-16

Not able to see the content of my data when I check or uncheck my checkbox in the console log

I don't understand why when I check (availability:1) or uncheck (availability:0) the checkbox, I don't have this info : availability:1 (for example), I only get availability: (empty same for trust and comments), when I console log to see the content of my data sent (whereas I can see the content of my status in console log).

export default function Display() {
  const { menuId } = useParams();
  const [forms, setForms] = useState();
  const [status, setStatus] = useState("");

  useEffect(() => {
    axios.post("", menuId:parseInt(menuId))
      .then((res) => {
        console.log(res);
        setForms(res.data.forms[0]);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [menuId]);

 
  const [data, setData] = useState({
    availability: "",
    status:""
  });

  function submit(e) {
    e.preventDefault();
    axios.post(data.availability, data.status).then((res) => {
      console.log(res.data);
    });
  }

  return (
    <Card className="h-full">
      <div className="p-4 flex items-center justify-between">       
          <div>
            <button
              type="button"
              onClick={() => setStatus({ status: "save" })}
            >
              Save
            </button>
          </div>
          <div>
            <button
              type="button"
              primary
              onClick={() => setStatus({ status: "not saved" })}
            >
              Not saved
            </button>
          </div>
      </div>
      <hr />
      <form onSubmit={(e) => submit(e)}>
        <span>
          Availability : <Checkbox value={!!forms.types.availability} />
        </span>
      </form>
    </Card>
  );
}

Checkbox :

export default function Checkbox({ v }) {
    const [checked, setChecked] = useState(v);
    return (
        <label>
            <input
                type="checkbox"
                checked={checked}
                onChange={(e) => setChecked(checked => !checked)}                   
            />
            {v}
        </label>
    );
}

Do you see why please ?

My json from api for menuId:1:

{
  "forms": [
    {
      "menuId": 1,
      
          "_id": "123ml66",
          "name": "Pea Soup",
          "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
          "types": [
            {
              "availability": 1,
              "trust":0,
              "comments":1
            }
          ],
          ...    
    },
    ...
  }


No comments:

Post a Comment