React JS: How to pass a value to other Component onSubmit

Question

I tried to create a button which gives me a popup window on click. The popup window contains a form which should let me type in any new entry. On submit, the entry should be passed to the main component.

I have two components. The main component is the 'App' component and the other component is the 'Popup' component.

Here is my code:

App.js

import React, { Component } from "react";
import Popup from "./Popup.js";
import "./styles.css";

class App extends Component {
  showPopup = false;

  createEntry = () => {
    this.showPopup = true;
    this.setState({ showPopup: this.showPopup });
  };

  handleSubmit = (value) => {
    console.log("New Entry: " + value);
    this.showPopup = false;
    this.setState({ showPopup: this.showPopup });
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.createEntry}> + </button>
        {this.showPopup ? <Popup handleSubmit={this.handleSubmit} /> : null}
      </React.Fragment>
    );
  }
}

export default App;

Popup.js

import React, { Component } from "react";
import "./styles.css";

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

    // I want to pass the submitted value to the App Component
    this.handleSubmit = this.props.handleSubmit.bind(this, this.state.value);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <React.Fragment>
        <div className="popup">
          <div className="popup_inner">
            <div> Create New Entry </div>
            <form onSubmit={this.handleSubmit}>
              <label>
                <input
                  type="text"
                  name="name"
                  value={this.state.value}
                  onChange={this.handleChange}
                />
              </label>
              <input type="submit" value="Submit" />
            </form>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Popup;

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
}

I tried to pass the 'value' to the 'handleSubmit' method by using handleSubmit as a prop method but that doesn't work.

What is an appropriate way to pass the value to the App component?

I'm still new to React, so please bear with me.

Thanks in advance.

Answer 1

The answer is in your question. You're passing it as a prop method and so you'll have to access it from the props. In your Popup.js you can call the method passed from your parent as

onSubmit = {this.props.handleSubmit}

I have created a CodeSandBox to demonstrate the flow of data from parent to child components and vice versa