React tutorial parent child communication in react typescript project

In this article i will explain you how you can use formik and yup for validation of your form in react typescript project

Step 1: Create React typescript project

Create react typescript project or you can skip this step if you wanted to add parent child communication in to your existing project

npx create-react-app my-app --template typescript

Step 2: Create parent component

Here i will consider App component as parent component

Here in my parent component i have declared two state variable through useState hook that is emailInput and isEmailSet
emailInput state variable is used for setting the value of email input box which we have added
isEmailSet state variable is boolean variable to toggle child component i mean to show the child component if we have inputed the value inside email input box and click on button and keep the child component hidden by default
responseMessage is a function to recieve data from child component
we will pass our email input to child component through props as you can see below here email is passed as props in ReactChildComponent and also responseMessage function to recieve data back from child component
```
<ReactChildComponent
  email={emailInput}
  responseMessage={(msg) => {
    responseMessage(msg);
  }}
/>
```

import "./App.css";
import React, { useState } from "react";
import ReactChildComponent from "./components/ReactChildComponent";

function App() {
  const [emailInput, setEmailInput] = useState("");
  const [isEmailSet, setEmailAdded] = useState(false);
  const responseMessage = (message) => {
    alert(`Message:${message}`);
  };
  return (
    <div style={{ marginTop: "20px" }} className="App">
      <input
        onChange={(e) => {
          setEmailInput(e.target.value);
        }}
        className="Enter your email"
      />
      <button
        onClick={() => {
          setEmailAdded(true);
        }}
        type="button"
      >
        Submit your email
      </button>
      <br />
      <br />
      {isEmailSet && (
        <ReactChildComponent
          email={emailInput}
          responseMessage={(msg) => {
            responseMessage(msg);
          }}
        />
      )}
    </div>
  );
}

export default App;

Step 3: Create Child component

Create a file src/components/ReactChildComponent.jsx and add the following piece of code also if you wanted to use in your existing component you can follow the guidelines as below

Here we are printing our email passed from parent component as props.email
Also we are calling the parent function that is responseMessage on button click to pass the data to parent component

import React from "react";

const ReactChildComponent = (props) => {
  return (
    <React.Fragment>
      Email inputed is {props.email}
      <button
        onClick={() => {
          props.responseMessage("Ok");
        }}
        type="button"
      >
        Ok
      </button>
      <button
        onClick={() => {
          props.responseMessage("Not ok");
        }}
        type="button"
      >
        Not Ok input different email
      </button>
    </React.Fragment>
  );
};

export default ReactChildComponent;