React-spring - Animated div removes onclick function

Question

I'm facing problem with my onClick function which is on a element. Without React-spring animations it works perfectly. But since I've added animations to it, function is not working. No errors in console, and I really can't find any problems like this on google. Have you encountered this type of problem?

Declaring an animation

import {useTransition, animated} from 'react-spring';

const gameOptionsTransitions = useTransition(showGameOptions, null, {
 from: { opacity: 0, transform:'translateY(200px)' },
 enter: { opacity: 1, transform:'translateY(0)' },
 leave: { opacity: 0, transform:'translateY(200px)'}
});

In return

{gameOptionsTransitions.map(({ item, key, props }) =>
      item && 
          <animated.div key={key} style={props}>
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsComputer}>Player vs. Computer</a>
              </Link>
                
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsPlayer}>Player vs. Player</a>
              </Link>

              <form onSubmit={handleSubmit}>
                  <input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
              </form>
          </animated.div>
  )};

As you can see, both of a elements are wrapped in Link element. So after click, you will be redirected to that path but also function should be fired. This function is sent to this component from App.js as a prop. I've tried to move whole onClick={props.playPlayerVsComputer} from a element to Link but nothing changes.

Sent function

  function playPlayerVsPlayer(){
    setPlayerVsPlayer({
      AI:false,
      AImove:false
    });

    setDimensions({
      rows:"3",
      columns:"3"
    })

    generateMatrix(3,3);
  }

This function sets dimensions state and then create matrix according to these dimensions. Then generateMatrix function fires another function, which renders rows x columns table to App. But it's not that important because there will be problem with that animated div, not with these functions.

score 1 · Accepted Answer · answered Oct 27 '20 at 10:38

I've changed animated div like this, so Link element don't have any other elements inside, also classNames moved to Link element.

{gameOptionsTransitions.map(({ item, key, props }) =>
    item && 
        <animated.div key={key} style={props}>
            <Link to="/play" className="setGameMode-btn" onClick={playPlayerVsComputer}>
                Player vs. Computer
            </Link>
    
            <Link to="/play" className="setGameMode-btn" onClick={playPlayerVsPlayer}>
                Player vs. Player
            </Link>

            <form onSubmit={handleSubmit}>
                <input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
            </form>
        </animated.div>
)};

For onClick events I have created two new functions which are calling these functions from App.js as a props.

//Fire animations sent as a props
function playPlayerVsComputer(){
    props.playPlayerVsComputer();
}

function playPlayerVsPlayer(){
    props.playPlayerVsPlayer();
}

score 0 · Answer 2 · answered Oct 27 '20 at 10:26

0

You are adding a react spring transition which have its own props ,

All you have to do just rename the props => to other name (annimationProps by example ) in order to not confuse the props passed to your component by the App file

as below :

{gameOptionsTransitions.map(({ item, key, annimationProps }) =>
      item && 
          <animated.div key={key} style={annimationProps}>
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsComputer}>Player vs. Computer</a>
              </Link>
                
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsPlayer}>Player vs. Player</a>
              </Link>

              <form onSubmit={handleSubmit}>
                  <input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
              </form>
          </animated.div>
)};

answered Oct 27 '20 at 10:26

Bourbia Brahim

14,459
4
39
52

Thanks for you answer! You approach did fix the function, now it's working as It is supposed to, but now animation doesn't work.. I've fixed it with this approach. check answer – Pinncik Oct 27 '20 at 10:35
1

I have posted it now – Pinncik Oct 27 '20 at 10:39
Do you have any experience with transitioning between routes? @SpringerF – Pinncik Oct 27 '20 at 11:09
@Pinncik , nop not realy sorry – Bourbia Brahim Oct 27 '20 at 20:26

React-spring - Animated div removes onclick function

2 Answers2