I am using Checkbox from material ui. This is the import statement:

import Checkbox from '@mui/material/Checkbox';

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have the following code being rendered :

<Checkbox value="Tutor 1" onClick={() => handleSendSelection()}/>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I want to get the value of the selected checkbox inside the handleSendSelection() function. When I print the value, it gives me undefined, whereas my expected value is the string "Tutor 1". How should I get the value of the checkbox?

const handleSendSelection = (event) => {
  console.log("value - ", event.target.value);
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

import { useState } from "react";
import "./styles.css";


export default function App() {

  const [value, setValue] = useState("")

  return (
    <div className="App">
      <input type="checkbox" value={value} onChange={() => (setValue("tutor_1"))} />
    </div>
  );
}

You can do something like that try to make an controlled checkbox qand set it according to your choice

CodePudding user response：

You did not pass the event in onclick function.

   <Checkbox value="Tutor 1" onClick={(event) => handleSendSelection(event)}/>
    const handleSendSelection = (event) => {
      console.log("value - ", event.target.value);
    }

Here's the working sandbox code https://codesandbox.io/s/checkboxes-material-demo-forked-4xo59?file=/demo.js