title: How do I pass state between functional components?
body: <p>I am currently writing a sign-up page with react-js with react-hooks and I am still learning so please excuse me if this is a very simple question.</p>
  
  <p>I have a signup.js written in functional component with hooks.  signup.js imports 'EmailTextField', 'PasswordTextField', 'NameTextField', 'CellPhoneTextField' ... components of which are also written in functional components with hooks.</p>
  
  <p>I made all these textfields as separate components to simplify the code as I have a requirement to have many different checks on each text fields. (and having all these fields in signup.js page makes very long code)</p>
  
  <p>At the end of the process in signup.js, I would like to get state of all it's sub-components (all those textfields) status (whether the user is good to sign in or not.) but I am not sure how to pass a state (or variable) from these textfields up to signup.js.</p>
  
  <p>I know redux can manage state but is there anyway to achieve this without redux?</p>
  
  <p>Thank you.</p>
  
  <p>I've created a <a href="https://codesandbox.io/embed/cranky-glade-82leu" rel="nofollow noreferrer"><strong>CodeSandbox Sample</strong></a> with a minimal sample code to work with.</p>
  
  <p>In here, I use <code>EmailTextfield</code> component in <code>apptest.js</code>.  I would like to get <code>isValid</code> state on <code>EmailTextfield</code> from <code>apptest.js</code> so that I can make sure all fields are validated before the user signs up.</p>
  
  <p>'./components/UI/Textfield/EmailTextField.js'</p>
  
  <pre><code>import React, { useState } from "react";
  import TextField from "@material-ui/core/TextField";
  import Grid from "@material-ui/core/Grid";
  
  export const EmailTextField = props =&gt; {
    const [value, setValue] = useState("");
    const [helperText, setHelperText] = useState(
      "Email address will be used as your username."
    );
    const [isValid, setIsValid] = useState("true");
  
    const handleOnChangeEmailAddress = event =&gt; {
      // Email Validation logic
      if (true) {
        setIsValid(true);
      } else {
        setIsValid(false);
      }
    };
  
    return (
      &lt;Grid item xs={12}&gt;
        &lt;TextField
          variant="outlined"
          required
          fullWidth
          id="email"
          label="email address"
          error={!isValid}
          helperText={helperText}
          name="email"
          autoComplete="email"
          margin="dense"
          onBlur={handleOnChangeEmailAddress}
        /&gt;
      &lt;/Grid&gt;
    );
  };
  
  export default EmailTextField;
  </code></pre>
  
  <p>'aptest.js'</p>
  
  <pre><code>import React from "react";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import Grid from "@material-ui/core/Grid";
  import { makeStyles } from "@material-ui/core/styles";
  import Container from "@material-ui/core/Container";
  import { EmailTextField } from "./components/UI/Textfield/EmailTextField";
  
  const useStyles = makeStyles(theme =&gt; ({
    "@global": {
      body: {
        backgroundColor: theme.palette.common.white
      }
    },
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    mainBox: {
      // margin: '200px',
      width: "550px",
      textAlign: "left",
      boxShadow: "0 2px 3px #ccc",
      border: "1px solid #eee",
      padding: "40px 70px 50px 70px",
      boxSizing: "border-box"
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(3)
    }
  }));
  
  const Apptest = props =&gt; {
    const classes = useStyles();
    return (
      &lt;Container component="main" maxWidth="xs"&gt;
        &lt;CssBaseline /&gt;
        &lt;div className={classes.paper}&gt;
          &lt;div className={classes.mainBox}&gt;
            &lt;form className={classes.form} noValidate&gt;
              &lt;Grid container spacing={2}&gt;
                &lt;EmailTextField /&gt;
              &lt;/Grid&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Apptest;
  </code></pre>