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.

It looks like it should be working to me. Can you maybe create a minimal example somewhere like codesandbox.io? — Mike
– Mike, Commented Jul 20, 2022 at 18:18
@Mike I tried making something in codesandbox.io but it was pretty laggy/glitchy and wouldn't load the components as intended. Is there any other way I can show you the code? — Eleven
– Eleven, Commented Jul 21, 2022 at 17:38

Richardson · Accepted Answer · 2022-07-20 17:59:39Z

0

try to call it inside of a hook

function SongModal(props) {

  const close = () => {
    props.CloseModal()
  }

  return ( 
  <div>
  <button onClick={close}>Close Btn</button>
   </div>
  )
};

also check the following acritical link

edited Jul 20, 2022 at 17:59

answered Jul 20, 2022 at 1:11

Richardson

2,3221 gold badge24 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eleven Over a year ago

Tried it, no difference. The clicks register, but the state itself doesn't change. However, when I do that same type of call outside of the jsx, so the SetTimeOut funtion for example, but I do a "close()' call inside of an arrow function, then the setTimeOut function will still work

Richardson Over a year ago

try it without () props.CloseModal tell me if wil work

Richardson Over a year ago

@Eleven please check the link inside my question.

Eleven Over a year ago

It does not work if I don't include the () when doing a function call, as it doesn't think it's a function call. also I read the link, but I already follow what it says. I pass in the function as a prop without () so it doesn't cause a call.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related