I am very puzzled by this. I have a modal that opens up to allow a user to fill out information. I have an add button that adds a new row to store and renders a new row. But I realized that even if I am only console logging, clicking that button causes the whole page/tab to do a full refresh. Why is this happening? I was initially checking for props or state changes but cannot figure it out.

handleAddNewRow = () => {
   console.log('adding new row')
   // this.setState(...) -- this is commented out due to make sure that setting state is not the problem
}

<FormSection>
   {this.state.stores.map(store, index) => (
      <div key={store.id}>
         <div>
            <h4>
               Choose Store
            </h4>
            <Dropdown options={storeOptions}>
            </Dropdown>
         </div>
         <TextInput />
         <TextInput />
      </div>
   )}
   <div>
      <button onClick={this.handleAddNewStore}>
         Add New Store
      </button> 
   </div>
</FormSection>

I thought that the setting state was the issue but I commented that out. I tried wrapping the component in a React.memo() as well. Thank you.