1

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,
    };
halfer
  • 19,824
  • 17
  • 99
  • 186
bihire boris
  • 1,530
  • 3
  • 19
  • 44

0 Answers0