CODEWITHSUNDEEP
reactjsmaterial-uinext.js
Aakash Chauhan
Aakash Chauhan

Reputation: 338

Slide transition component is not working when using 2 different slides

When I use only one Slide, either on screen 1 text or screen 2, it works fine.

My question is why it's not working when I use two different slides?

I want to use two different slides so that if a user switches back and forth, it must show a transition.

I've tried this:

    export default function App() {
      const [step, setStep] = useState(1);
      const [slider, setSlider] = useState(false);
    
      const handlenext = () => {
        setStep(2);
        setSlider(true);
      };
    
      const handleprev = () => {
        setStep(1);
        setSlider(true);
      };
      return (
        <div className="App">
          {step === 1 ? (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
              <h1>this is screen 1</h1>
            </Slide>
          ) : (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
               <h1> screen 2</h1>
            </Slider>
          )}
    
          <Button onClick={() => handlenext()}>Next</Button>
          <Button onClick={() => handleprev()}>Previous</Button>
        </div>
      );
    }

and this:-

export default function App() {
  const [step, setStep] = useState(1);


  
  };
  return (
    <div className="App">
      {step === 1 ? (
        <Slide direction="up" in={true} mountOnEnter unmountOnExit>
          <h1>this is screen 1</h1>
        </Slide>
      ) : (
        <h1> screen 2</h1>
      )}

      <Button onClick={() => setStep(2)}>Next</Button>
      <Button onClick={() => setStep(1)}>Previous</Button>
    </div>
  );
}

pls check reproduction on the below link.

https://codesandbox.io/s/keen-shockley-oprtk?file=/src/App.js

Upvotes: 2

Views: 1413

Answers (1)

Siraj Alam
Siraj Alam

Reputation: 10025

Transitions does not work in conditional rendering.

So if you leave the hide and show functionality to the component itself so the transition will work.

Just remove the conditional rendering and give the state values to the in prop of the Slide component.

<Slide direction="up" in={step === 1} mountOnEnter unmountOnExit>
        <h1>this is screen 1</h1>
      </Slide>

      <Slide direction="up" in={step === 2} mountOnEnter unmountOnExit>
        <h1> screen 2</h1>
      </Slide>

Upvotes: 1

Related Questions