title: Click button not triggering "handleSubmit" function in React
body: <p>I am building a react on rails app. I have a button on the page that user can indicate whether they want to join a meet up or not. Clicking "join" button should create a rsvp relation between the current user and an event, and the button will be switched to "Leave", if user then click on the "Leave" button, this relationship will be deleted from the rails backend. After messing around my react component, my "Join" button doesn't trigger the "onSubmit" function, and the "Leave" button seems to return an error saying "submission form cancelled because form is not connected". I'd appreciated a lot if any one can help me clean my logic. </p>
  
  <pre><code>import React from 'react'
  
  class EventsIndexContainer extends React.Component {
   constructor(props) {
   super(props)
   this.state = {
    active: props.rsvp
   }
   this.toggleButton = this.toggleButton.bind(this)
   this.handleRsvpSubmit = this.handleRsvpSubmit.bind(this)
   this.handleRsvpDelete = this.handleRsvpDelete.bind(this)
  }
  
  toggleButton() {
   this.setState({active: !this.state.active})
  }
  
  handleRsvpSubmit(event) {
   event.preventDefault()
   let formPayLoad = {
    user_id: this.props.current_user.id,
    event_id: this.props.selectedId
   }
   this.props.addRsvp(formPayLoad)
  }
  
  handleRsvpDelete() {
   fetch(`/api/v1/rsvps/${this.props.selectedId}`, {
    method: 'DELETE'}
   )
  }
  
  render() {
   let button
   let joinButton =
   &lt;form onSubmit={this.handleRsvpSubmit}&gt;
    &lt;button type="button" onClick={() =&gt; (this.props.handleSelect(), 
    this.toggleButton())}&gt;Join&lt;/button&gt;
   &lt;/form&gt;
  
   let leaveButton =
    &lt;button type="button" onClick={() =&gt; (this.toggleButton(), 
    this.handleRsvpDelete)}&gt;Leave&lt;/button&gt;
  
   button = this.state.active? leaveButton : joinButton
  
   return(
     &lt;div&gt;
        &lt;h4&gt;{this.props.location} - {this.props.meal_type} at 
        {this.props.time}&lt;/h4&gt;
        &lt;p&gt;{this.props.group.name}&lt;/p&gt;
        {button}
        &lt;button&gt;See who is going&lt;/button&gt;
    &lt;/div&gt;
   )
  }
  }
  
  export default EventsIndexContainer
  </code></pre>
  
  <p>This is the parent container:</p>
  
  <pre><code>import React from 'react'
  import GroupIndexContainer from './GroupIndexContainer'
  import EventsIndexContainer from './EventsIndexContainer'
  
  class MainContainer extends React.Component {
   constructor(props) {
   super(props)
   this.state = {
    groups: [],
    current_user: null,
    events: [],
    rsvps: [],
    selectedId: null
   }
   this.fetchGroups = this.fetchGroups.bind(this)
   this.fetchEvents = this.fetchEvents.bind(this)
   this.handleSelect = this.handleSelect.bind(this)
   this.addRsvp = this.addRsvp.bind(this)
   this.fetchRsvps = this.fetchRsvps.bind(this)
   }
  
   componentDidMount() {
      fetch('api/v1/users.json', {
        credentials: 'same-origin',
        method: "GET",
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
        this.setState ({current_user: data.user})
      })
      .then(this.fetchGroups())
      .then(this.fetchEvents())
      .then(this.fetchRsvps())
    }
  
    fetchGroups() {
      fetch('/api/v1/groups', {
        credentials: 'same-origin',
        method: "GET",
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
        this.setState({groups: data.groups})
      })
    }
  
    fetchEvents() {
      fetch('/api/v1/events', {
        credentials: 'same-origin',
        method: "GET",
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
        this.setState({events: data})
      })
    }
  
    fetchRsvps() {
      fetch('/api/v1/rsvps', {
        credentials: 'same-origin',
        method: "GET",
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
        this.setState({rsvps: data.rsvps})
      })
    }
  
    handleSelect(id) {
      this.setState({selectedId: id})
    }
  
    addRsvp(formPayLoad) {
      fetch('/api/v1/rsvps', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'},
        body: JSON.stringify(formPayLoad)
      })
    }
  
    render() {
      let groups = this.state.groups.map((group) =&gt; {
        return (
          &lt;GroupIndexContainer
            key={group.id}
            id={group.id}
            name={group.name}
          /&gt;
        )
      })
  
      let rsvp_ids = this.state.rsvps.map(rsvp =&gt; rsvp.event_id)
      let events = this.state.events.map((event) =&gt; {
        return(
          &lt;EventsIndexContainer
            key={event.id}
            id={event.id}
            rsvp={rsvp_ids.some(rsvp_id =&gt; rsvp_id == event.id) ? true : false}
            location={event.location}
            meal_type={event.meal_type}
            time={event.time}
            group={event.group}
            current_user={this.state.current_user}
            user={event.user}
            selectedId={this.state.selectedId}
            addRsvp={this.addRsvp}
            handleSelect={() =&gt; this.handleSelect(event.id)}
          /&gt;
        )
      })
  
      return(
        &lt;div className="wrapper"&gt;
  
          &lt;div className="groups-index"&gt;
            &lt;h3&gt;Your Groups:&lt;/h3&gt;
            {groups}
          &lt;/div&gt;
  
          &lt;div className="events-index"&gt;
            &lt;h3&gt;What's happening today...&lt;/h3&gt;
            {events}
          &lt;/div&gt;
  
        &lt;/div&gt;
      )
    }
  }
  
         export default MainContainer
  </code></pre>