ruby on rails - React Child Component Causing Parent Re-Render on Ajax Call -

i using react react router on top of rails handle front end of app supposed return info whatever gem user searches for, however, once hit submit, child component, manages it's own state, causes re-render parent component.

expected result: savedgems.jsx re-renders actual result: search.jsx re-renders

here code:

staticpage.jsx

export default class staticpage extends react.component {      render() {         return (                 <browserrouter>                     <div style={{display: 'flex', flexdirection: 'row'}}>                         <route exact path='/' render={() => <search />}/>                         <route path='/favorites' render={() => <favorites/>} />                     </div>                  </browserrouter>         );     } } 

search.jsx

export default class search extends react.component {       render() {          return (             <div style = {{display: 'flex', flexdirection: 'row'}}>                 <sidebar/>                 <div style = {{display: 'flex', flexdirection: 'column'}}>                     <header name = "search gems"/>                     <form/>                     <savedgems/>                 </div>             </div>             )         } } 

savedgems.jsx

export default class savedgems extends react.component {     constructor() {       super();       this.state = {saved_gems : []};        console.log(this.saved_gems);     }      componentdidmount() {         $.getjson('/api/v1/saved_gems.json', (response) => { this.setstate({ saved_gems: response }) });     }       render() {         var saved_gems= this.state.saved_gems.map((saved_gem) => {             return (                 <div key={saved_gem.id}>                     <h3>{saved_gem.name}</h3>                     <h3>{saved_gem.info}</h3>                     <h3>{saved_gem.dependencies}</h3>                 </div>             )         });          return (             <div>             {saved_gems}             </div>             )         } } 

_form.jsx

export default class form extends react.component {     constructor() {         super();          this._handleclick = this._handleclick.bind(this);         this.state = {formbordercolor : "#5f5f5f"};     }      render() {         return (               <div>                 <form>                   <label>                     <input ref='name'                             type="text"                             placeholder='search'                     style= {{fontfamily: 'lato-regular',                              fontsize: 18,                              height:89,                              width: 780,                              paddingleft: 20,                              backgroundcolor: 'white',                              border: '1px solid',                              bordercolor: this.state.formbordercolor,                              borderradius: 100}}/>                   </label>                    <input type="image" src='/assets/magnifying-glass.png'                          style={{marginleft: -70}}                          onclick={this._handleclick}/>                 </form>               </div>         )     }      _handleclick(event) {         const name = this.refs.name.value;         const info = '';         const dependencies = '';            $.ajax({           url: '/api/v1/saved_gems',           type: 'post',           data: { saved_gem: { name,  info, dependencies } },           success: (saved_gem) => {                this.props.handlesubmit(saved_gem);               this.refs.name.value = '';               this.refs.info.value = '';               this.refs.dependencies.value = '';           },           error: (xhr) => {             this.setstate = ({formbordercolor : 'red'}).bind(this);             alert("sorry! not valid gem");           }         })     } }