dimanche 24 mai 2020

Why is props.action not a function in my handleChange function?

I'm relatively new to React and Material UI and I'm trying to build a table with a list of names of candidates and a column to select these candidates and pass these values to another table. Howvever, I keep getting props.action is not a function in my handleChange function?

My class's constructor

class AssignExaminer extends React.Component {
    constructor(props) {
        super(props)
        this.handleCheck = this.handleCheck.bind(this);
        this.state = {
            candidate: dummyCandidate,
            checkedValues: []
        };
handleCheck(e, x) {
        this.setState(state => ({
            checkedValues: state.checkedValues.includes(x)
                ? state.checkedValues.filter(c => c !== x)
                : [...state.checkedValues, x]
        }));
    }

My table

<TableBody>
                                {(this.state.candidate).map((candidate) => (

                                    <TableRow>
                                        <TableCell>
                                            {candidate.name}
                                        </TableCell>
                                        <TableCell>
                                            <Checkbox  onChange={e => this.handleCheck(e, candidate.name)}
                                                checked={this.state.checkedValues.includes(candidate.name)} />
                                        </TableCell>
                                            </TableRow>
                                        ))}
                            </TableBody>

My checkbox class

export default function CheckboxLabels(props) {

  const handleChange = (event) => {
    props.action(event);
  };

  return(
        <>
          <StyledCheckbox  checked={props.checked} onChange={handleChange}/>
            {props.name}
        </>
  );
}



Aucun commentaire:

Enregistrer un commentaire