{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/react-tutorial-parent-child-component-communication-react/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"05040a2d-717a-52ca-91b0-3487fe4b3aa1","excerpt":"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…","html":"<p>In this article i will explain you how you can use formik and yup for validation of your form in react typescript project</p>\n<h4>Step 1: Create React typescript project</h4>\n<p>Create react typescript project or you can skip this step if you wanted to add parent child communication in to your existing project</p>\n<pre><code class=\"language-js\">npx create-react-app my-app --template typescript\n</code></pre>\n<h4>Step 2: Create parent component</h4>\n<p>Here i will consider <strong><em>App component as parent component</em></strong></p>\n<ul>\n<li>\n<p>Here in my parent component i have declared two state variable through useState hook that is emailInput and isEmailSet</p>\n</li>\n<li>\n<p>emailInput state variable is used for setting the value of email input box which we have added</p>\n</li>\n<li>\n<p>isEmailSet state variable is boolean variable to toggle child component i mean to show the child component if we have\ninputed the value inside email input box and click on button and keep the child component hidden by default</p>\n</li>\n<li>\n<p>responseMessage is a function to recieve data from child component</p>\n</li>\n<li>\n<p>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</p>\n<pre><code class=\"language-js\">&#x3C;ReactChildComponent\n  email={emailInput}\n  responseMessage={(msg) => {\n    responseMessage(msg);\n  }}\n/>\n</code></pre>\n</li>\n</ul>\n<pre><code class=\"language-js\">import \"./App.css\";\nimport React, { useState } from \"react\";\nimport ReactChildComponent from \"./components/ReactChildComponent\";\n\nfunction App() {\n  const [emailInput, setEmailInput] = useState(\"\");\n  const [isEmailSet, setEmailAdded] = useState(false);\n  const responseMessage = (message) => {\n    alert(`Message:${message}`);\n  };\n  return (\n    &#x3C;div style={{ marginTop: \"20px\" }} className=\"App\">\n      &#x3C;input\n        onChange={(e) => {\n          setEmailInput(e.target.value);\n        }}\n        className=\"Enter your email\"\n      />\n      &#x3C;button\n        onClick={() => {\n          setEmailAdded(true);\n        }}\n        type=\"button\"\n      >\n        Submit your email\n      &#x3C;/button>\n      &#x3C;br />\n      &#x3C;br />\n      {isEmailSet &#x26;&#x26; (\n        &#x3C;ReactChildComponent\n          email={emailInput}\n          responseMessage={(msg) => {\n            responseMessage(msg);\n          }}\n        />\n      )}\n    &#x3C;/div>\n  );\n}\n\nexport default App;\n</code></pre>\n<h4>Step 3: Create Child component</h4>\n<p>Create a file <strong><em>src/components/ReactChildComponent.jsx</em></strong> and add the following piece of code also if you wanted to use in your existing component you can follow the guidelines as below</p>\n<ul>\n<li>Here we are printing our email passed from parent component as props.email</li>\n<li>Also we are calling the parent function that is responseMessage on button click to pass the data to parent component</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\n\nconst ReactChildComponent = (props) => {\n  return (\n    &#x3C;React.Fragment>\n      Email inputed is {props.email}\n      &#x3C;button\n        onClick={() => {\n          props.responseMessage(\"Ok\");\n        }}\n        type=\"button\"\n      >\n        Ok\n      &#x3C;/button>\n      &#x3C;button\n        onClick={() => {\n          props.responseMessage(\"Not ok\");\n        }}\n        type=\"button\"\n      >\n        Not Ok input different email\n      &#x3C;/button>\n    &#x3C;/React.Fragment>\n  );\n};\n\nexport default ReactChildComponent;\n</code></pre>","fields":{"slug":"/react-tutorial-parent-child-component-communication-react/"},"frontmatter":{"title":"React tutorial parent child communication in react typescript project","date":"March 10, 2023","description":"In this article i will explain you can pass data from parent to child and vice versa in react typescript project","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"previous":{"fields":{"slug":"/react-tutorial-adding-form-validation-using-react-formik/"},"frontmatter":{"title":"React tutorial adding react formik validation in react typescript project","date":"March 03, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"next":{"fields":{"slug":"/react-tutorial-using-hoc-in-react-typescript-project/"},"frontmatter":{"title":"React tutorial using high order component in react typescript project","date":"March 20, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}}},"pageContext":{"id":"05040a2d-717a-52ca-91b0-3487fe4b3aa1","previousPostId":"4e86be9e-cf7f-53c0-b73e-8ca0894a818c","nextPostId":"3e3b2299-69e9-5128-9a84-a38cb7e1c60e"}},
    "staticQueryHashes": ["3860684146"]}