Semantic-UI-React transitions

Question

Essentially i'd like to have this Success Message component render with a transition when the state changes.

I followed the docs , but I'm still missing something integral (duh!)

This is my component:

class Login extends Component {
  constructor (props) {
    super(props)

    this.state = {
      isLoggedIn: true,
      isVisible: false,
      hide: 1000,
      show: 1000,
      username: '',
      password: '',
      usernameError: false,
      passwordError: false,
      formError: true,
      formSuccess: false
    }

//methods:

 this.toggleVisibility = this.toggleVisibility.bind(this)
 this.handleChange = this.handleChange.bind(this)
 this.handleIsLoggedInClick = this.handleIsLoggedInClick.bind(this)
 this.handleSubmit = this.handleSubmit.bind(this)
}

The function which I created for toggling visibility:

toggleVisibility () { this.setState({ isVisible: !this.state.isVisible })}

And the component that toggles:

{(!formError && formSuccess) ?
  <Transition visible={()=>{this.toggleVisibility}} animation='scale' duration={500}>
    <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen' />
  </Transition>
: null
}

Now won't this just fire when the component becomes visibile from the (!formError && formSuccess) ?

visible={()=>{this.toggleVisibility}}

UPDATE

I guess I should have supplied a visual: To clarify—I'd when a user successfully enters the correct info to sign up, the success component simply animates into the DOM with the same transition found here

That example show the results achieved with a button firing it off. I'd like it to be the form being successfully filled out...

Answer 1

visible={()=>{this.toggleVisibility}} should be visible={this.toggleVisibility}

I believe the way you have it you are currently you are running a function with a return of undefined .

Also, but I don't think the function gets to run again when this.toggleVisibility gets updated. If it does run again your function should look like visible={()=>this.toggleVisibility} and visible inside the component would have to be called as a function props.visible() however, a function is not required to get the desired effect.

edit: changed null to undefined

Edit 2: here is an example https://codesandbox.io/embed/yp1p7vo3q1?fontsize=14 I did use hooks, but its more or less the same

Edit 3: toggleVisibility does not need to exist

{(!formError && formSuccess) ?
  <Transition visible={()=>{this.toggleVisibility}} animation='scale' duration={500}>
    <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen' />
  </Transition>
: null
}

should be

 <Transition visible={(!this.formError && this.formSuccess)} animation='scale' duration={500}>
    <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen' />
  </Transition>