React Pass the value input in the other Pages - reactjs

Question

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

Answer 1

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;