So briefly I already had a transition that watched if isAddRoom
is true then do the transition(works fine). Now what I am trying to accomplish is that every time a user clicks submit I will obviously set the state to the initial state but I also want the transition with the empty newRoomform on every submit. I am not really sure what to watch to create the effect.
from accommodation form to room form transition
<SwitchTransition>
<CSSTransition
key={this.state.isAddRoom}
addEndListener={(node, done) =>
node.addEventListener('transitionend', done, false)
}
classNames="fade"
>
{(isAddRoom || this.state.isAddRoom) === true ? (
<CreateRoomForm
ScrollBar={ScrollBar}
LabelInput={LabelInput}
currentState={this.state}
handleChange={() => this.handleChange}
removeItem={this.removeItem}
handleMultipleChange={this.handleMultipleChange}
setTheState={this.setTheState}
/>
) : (
<CreateAccommodationForm
ScrollBar={ScrollBar}
LabelInput={LabelInput}
currentState={this.state}
handleChange={() => this.handleChange}
removeItem={this.removeItem}
handleMultipleChange={this.handleMultipleChange}
setTheState={this.setTheState}
/>
)}
</CSSTransition>
</SwitchTransition>
</div>
My component states
this.state = {
services: {
values: [],
input: '',
},
amenities: {
values: [],
input: '',
},
name: '',
type: '',
cost: '',
bedrooms: 0,
size: 0,
room_number: '',
address: '',
description: '',
geoLocation: '',
files: [],
urls: [],
isDragging: false,
isAddRoom: false,
};