Page refreshes when I click submit ReactJS

Question

I have been trying to implement a scenario where the data is passed from the child component to the parent component.

I am able to pass it but the screen doesn't persist due to the use of the form. I want to know how I can implement it while using form.

import React, { Component } from 'react';
import './App.css';

class FormComponent extends React.Component {
  render() {
    return (
      <form>
        <input type="text" name="caption" value={this.props.caption} onChange={(event) => this.props.changeCaption(event.target.value)} />
        <button onClick={this.props.onClick}>Add</button>
      </form>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      caption: ""
    }
  }

  changeCaption = (caption) => {
    this.setState({
      caption: caption
    })
  }

  handleClick = () => {
    console.log('Send to the list component', this.state.caption);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <FormComponent 
            onClick={this.handleClick}
            caption={this.state.caption}
            changeCaption={this.changeCaption}
          />
        </header>
      </div>
    );
  }
}

export default App;

I would really appreciate some help with this. Thank You.

Seba99 · Accepted Answer · 2019-02-21 12:59:51Z

2

Hard to tell without testing but let me guess that it's link to "normal" behaviour of a form tag when submitted ....

Then you'll have to prevent the event to bubble, try this :

 handleClick = (e) => {
  e.preventDefault();
  console.log('Send to the list component', this.state.caption);
 }

edited Feb 21, 2019 at 12:59

answered Feb 21, 2019 at 12:45

Seba99

1,3391 gold badge17 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seba99 Over a year ago

Don't forget to "mark as resolved" by choosing an answer with the tick ;)

RainDev · Accepted Answer · 2019-02-21 12:45:22Z

2

if you don't want to submit form on click you can add type="button" attribute to your button:

<button type="button" onClick={this.props.onClick}>Add</button>

answered Feb 21, 2019 at 12:45

RainDev

1,1288 silver badges9 bronze badges

Collectives™ on Stack Overflow

Page refreshes when I click submit ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related