He estado tratando de cambiar el estado 'ModalOn' que se crea dentro del archivo medCardSong.js, y he estado tratando de cambiar ese estado desde el interior del archivo 'SongModal.js', que es un componente secundario dentro de medCardSong.js.
Ingresé la función changeState 'SetModalOn' como accesorio para el componente SongModal.js, y traté de cambiar el estado a través de eso.
Aquí está medCardSong.js:
import React, { useEffect } from 'react'; import { useState} from 'react'; import SongModal from '../modals/SongModal'; function MediumCardSong(props) { const [ModalOn, SetModalOn] = useState(false); function killme() { SetModalOn(false); console.log(7) } console.log(ModalOn) return ( <div className={" flex flex-col m-2 overflow-hidden duration-300 w-52 " + (ModalOn ? 'transition-none' : 'hover:scale-105 transition-all')} onClick={() => {SetModalOn(true);}}> <img className='object-cover rounded-3xl' src="https://i0.wp.com/coolhunting.com/wp-content/uploads/2022/07/steve-lacy- bad-habit.jpg?fit=586%2C586&ssl=1" alt="" /> <div className='pb-2'> <div className='flex'> <div className='px-2 pt-2 text-2xl font-bold text-gray-400'>#1</div> <div className='pl-3 text-xl pt-2 text-white'>Mercury</div> </div> <div className='text-left pl-5 text-gray-500'>Steve Lacy</div> </div> {ModalOn && <SongModal CloseModal={killme} />} </div> ); } export default MediumCardSong;y aquí está SongModal.js:
importar reaccionar desde 'reaccionar'
function SongModal(props) { // setTimeout(() => {props.CloseModal(false)}, 1000) return ( <div className="bg-neutral-800 bg-opacity-60 fixed inset-0 z-50 backdrop-blur-sm"> <div className="flex h-screen justify-center items-center"> <div className="justify-center bg-neutral-700 py-12 px-24 border-4 border- pearmint rounded-xl text-xl text-white" > <button className='text-3xl text-white pr-24 pb-24' onClick={() => {props.CloseModal()}} >X</button> sad </div> </div> </div> ) };exportar SongModal por defecto;
La función CloseModal importada funciona según lo previsto cuando se aplica fuera de jsx. Por ejemplo, el fragmento de código "SetTimeOut" funcionaría correctamente si no estuviera comentado. Sin embargo, esto no sucede cuando llamo a "CloseModal" dentro de un controlador de eventos Onclick, como la llamada que hice para el botón 'x'.
También he usado console.log para ver si el botón ha estado registrando los clics que hago y así ha sido. Así que estoy confundido en cuanto a por qué la función props.CloseModal no funciona según lo previsto dentro del detector de eventos OnClick. Por favor, da un consejo si puedes.