React Pass the value input in the other Pages

user_13580234 0
Viewed 36

I have a homepage where they can click the modal button. after the button click the modal will show. then in the modal they will input a text and when they click submit the text they input should be display in the homepage. Currently the one i did is not displaying in homepage when click the submit button. Please help. Thank you

This is the code:

https://codesandbox.io/s/competent-rgb-lk4ws

react-native reactjs
1 Answers

Modal

In your Modal component you can create a event when the Submit button is clicked:

import React from "react";
import "./modal.css";

// Create new event: onSubmitClick
function Modal({ setOpenModal, onSubmitClick }) {
  // It`s function get name value and pass to onSubmitClick
  function getData() {
    const nameValue = document.getElementById("name").value;
    onSubmitClick(nameValue);
    setOpenModal(false);
  }

  return (
    <div className="modalBackground">
      <div className="modalContainer">
        <div className="titleCloseBtn">
          <button
            onClick={() => {
              setOpenModal(false);
            }}
          >
            X
          </button>
        </div>
        <div className="title">Forms</div>
        <div className="body">
          <input id="name" placeholder="Enter Your Name" />
        </div>
        <div className="footer">
          <button
            onClick={() => {
              setOpenModal(false);
            }}
            id="cancelBtn"
          >
            Cancel
          </button>
          {/* The onclick should be onClick */}
          <button onClick={getData}>Submit</button>
        </div>
      </div>
    </div>
  );
}

export default Modal;

Home

In home page you can get the event and use the new name value

import React, { useState } from "react";
import Modal from "../../src/components/Modal/modal.js";
const Home = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [name, setName] = useState("");

  function handleModalSubmitClick(nameValue) {
    // Receive new value, and set in a state
    setName(nameValue);
  }

  return (
    <div class="hello">
      <h1>Hey, click on the button to open the modal.</h1>
      <span>name: {name}</span>
      <button
        onClick={() => {
          setModalOpen(true);
        }}
        class="button is-pulled-right"
      >
        Button
      </button>
      {modalOpen && (
        <Modal
          setOpenModal={setModalOpen}
          onSubmitClick={handleModalSubmitClick} // Bind a function to handle a event
        />
      )}
    </div>
  );
};

export default Home;
user_112055460
Related