0

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.

John McGellan
  • 61
  • 1
  • 6
  • This is a form so it's possibly an onSubmit() issue. The code you're showing the `onClick` is calling `this.handleAddNewStore` the method you're showing is `handleAddNewRow` so it's honestly hard to know without seeing all of the correct code. – DrZoo Jun 09 '22 at 19:25
  • submit buttons submit ` – epascarello Jun 09 '22 at 19:31

1 Answers1

0

It probably causes form sending. You should pass in your onClick callback event parameter and call event.preventDefault() method.

Yevhenii Shlapak
  • 588
  • 2
  • 4
  • 13