Issue with Changing state from 1 React Component inside of another React component

Question

I've been trying to change the 'ModalOn' state which is created inside of the medCardSong.js file, and I've been trying to change that state from inside of the 'SongModal.js' file, which is a child component inside of medCardSong.js.

I've inputted the changeState function 'SetModalOn' as a prop to the SongModal.js component, and i've tried changing the state through that.

Here's 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; 

and here's SongModal.js:

import React from 'react'

 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>
  )
  };

 

export default SongModal;

The imported CloseModal function works as intended when it's applied outside of the jsx. For example, the "SetTimeOut" piece of code would work properly if it's uncommmented. However this doesn't happen when I call "CloseModal" inside of an Onclick event-handler, such as the call I did for the 'x' Button.

I've also used console.log to see if the button has been registering the clicks I make and it has been. So I'm confused as to why the props.CloseModal function does not work as intended inside the OnClick event listener. Please give advice if you can.

Answer 1

try to call it inside of a hook

 function SongModal(props) { const close = () => { props.CloseModal() } return ( <div> <button onClick={close}>Close Btn</button> </div> ) };