I'm following a React tutorial. In the Backdrop.js file, there is a simple function that returns a backdrop and assigns an onClick prop to close an open Modal when one clicks the backdrop.

My code looks absolutely identical to me to the one in the tutorialist's Github repo. Somehow though, when I use my code for the function, the Modal doesn't close when I click the backdrop. However when I copy and paste his code directly from Github, the Modal does close when I click the backdrop.

I have no idea what's going on. As far as I can tell, there are no differences whatsoever between the two pieces of code.

My code:

function Backdrop(props) {
  return <div className='backdrop' onCLick={props.onClick} />;
}

export default Backdrop;

His code:

function Backdrop(props) {
  return <div className='backdrop' onClick={props.onClick} />;
}

export default Backdrop;

I'll even have both functions on the same page and if I comment mine out the app will work as intended, but if I comment his code out it doesn't work anymore. For ex, this works (my code on top commented out):

// function Backdrop(props) {
//   return <div className='backdrop' onCLick={props.onClick} />;
// }

// export default Backdrop;


function Backdrop(props) {
  return <div className='backdrop' onClick={props.onClick} />;
}

export default Backdrop;

But this doesn't:

function Backdrop(props) {
  return <div className='backdrop' onCLick={props.onClick} />;
}

export default Backdrop;


// function Backdrop(props) {
//   return <div className='backdrop' onClick={props.onClick} />;
// }

// export default Backdrop;

I do use the Prettier extension if that makes a difference. Could it mess the formatting somehow in an undetectable way?