Estoy siguiendo un tutorial de React. En el archivo Backdrop.js , hay una función simple que devuelve un backdrop y asigna un prop onClick para cerrar un Modal abierto cuando se hace clic en el backdrop .

Mi código me parece absolutamente idéntico al del repositorio de Github del tutorialista. Sin embargo, de alguna manera, cuando uso mi código para la función, el Modal no se cierra cuando hago clic en el backdrop . Sin embargo, cuando copio y pego su código directamente desde Github, el Modal se cierra cuando hago clic en el backdrop .

No tengo idea de lo que está pasando. Por lo que puedo decir, no hay ninguna diferencia entre las dos piezas de código.

Mi código :

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

Su código :

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

Incluso tendré ambas funciones en la misma página y si comento la mía, la aplicación funcionará según lo previsto, pero si comento su código, ya no funciona. Por ejemplo, esto funciona (mi código en la parte superior comentado):

 // 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;

Pero esto no:

 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;

Uso la extensión Prettier si eso hace la diferencia. ¿Podría estropear el formato de alguna manera de forma indetectable?