javascript - How to send this.state from a component to relay root container -

i want change root query parameter based on this.state.eventid child component, have no clue how props relay root container. started based on relay-starter-kit.

i have react component has dropdown menu, , onselect setstates eventid

   renderattend() {      if (this.props.groups != null && this.state.success != true)   {      var events = this.props.events.map(function(event){           var boundselect = () => {this.setstate({eventid:event.nodes[0].id})}          return <menuitem style={{fontsize:20}}eventkey={event.nodes[0].id} onselect={boundselect.bind(this)}>{event.nodes[0].properties.summary} / {event.nodes[0].properties.start}</menuitem>                  },this)       var teams = this.props.groups.map(function(team){         var boundselect = () => {this.setstate({teamid:team.nodes[0].id})}         return <menuitem style={{fontsize:20}}eventkey={team.nodes[0].id} onselect={boundselect.bind(this)}>{team.nodes[0].properties.name}</menuitem>                 },this)           return (                 <div>          <buttongroup>         <dropdownbutton style={{padding:"15px",fontsize:20}}title="events" id="bg-vertical-dropdown-2">         {events} </dropdownbutton> <dropdownbutton style={{padding:"15px",fontsize:20,marginleft:"5px"}} title="groups" id="bg-vertical-dropdown-2">   {teams} </dropdownbutton>  </buttongroup>         </div>             )  } } 

i want use state somehow change root query... approute... import relay 'react-relay';

 export default class extends relay.route {   static paramdefinitions = {  eventid: {required: false}   };   static queries = {     event : () => relay.ql`query{eventstate(eventid:$eventid)}`,   };    static routename = 'apphomeroute';   } 

and app.js

  import 'babel-polyfill';   import app './components/app';  import apphomeroute './routes/apphomeroute';  import react 'react';  import reactdom 'react-dom';  import relay 'react-relay';      reactdom.render(    <relay.rootcontainer     component={app}    route= {new apphomeroute}    renderloading={function() {    return <div style=         {{display:"flex",justifycontent:"center",margintop:"55px"}}>  <h1>loading...</h1></div>;    }}    renderfailure={function(error, retry) {     return (      <div>         <h1>click refresh</h1>       </div>    );    }}       />,     document.getelementbyid('root')     ); 

now want this.state.eventid react component update root query, have no idea how pass data child component react root.container. not want use react-router :) p.s. this.props.events passed me ajax call not saved in relay/graphql data.

for such case, better thing wrap root query story like

{    store {      events(eventid:$eventid)    }  }

so in root query have

export default class extends route {    static queries = {      app:() => relay.ql`query { store }`    };      static routename = "approute";  }

and in page create fragemnt like

let relayapp = createcontainer(somecomponent, {    initialvariables: {      eventid: null    },    fragments: {      app: () => relay.ql `        fragment on store {          id          events(eventid: $eventid) {            pageinfo {              hasnextpage            }            edges {              cursor              node {                name                ...              }            }          }        }      `,    },  });    export  default relayapp;

for child component, set eventid , onchange event handler props parent component. , in parent componet implement event handler , call this.props.setvariables({eventid: someval}) like

// child component    export default class menu extends component {    render() {      return(        <ul>          <li onclick={() => this.props.selectitem(val)}>{val}</li>          ...        </ul>      )    }  }    // parent component    class main extends component {    _selectitem = (val) => {      this.props.relay.setvariables({eventid: val});    }        render() {      return(        <div>          <menu selectitem={() => this._selectitem}/>        </div>      )    }    }    let relayapp = ...    export default main

hope help.