title: Sharing data between React components
body: <p>I have a search form in React that performs an API call and saves the data called nameservers in-state using the useState() React hook.</p>
  <p>I'm trying to determine how I can pass this data to another component so the data can be used for rendering elsewhere on the page.</p>
  <p>Currently, I'm just outputting the data in my return block which appears below the search form.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  import { Spinner, Form, Button, Container, Col } from &quot;react-bootstrap&quot;;
  import { FaSearch } from &quot;react-icons/fa&quot;;
  
  const SearchForm: React.FC = () =&gt; {
    const [domain, setDomain] = useState(&quot;&quot;);
    const [loading, setLoading] = useState(false);
    const [nameservers, setNameservers] = useState([]);
    const [submitted, setSubmitted] = useState(false);
  
    const formText = &quot;Search for a domains&quot;;
  
    const handleChange = (event: any) =&gt; {
      setDomain(event.target.value);
    };
  
    const handleSubmit = (event: any) =&gt; {
      event.preventDefault();
      setLoading(true);
      setSubmitted(true);
      console.log(domain);
  
      fetch(`https://dns.google.com/resolve?name=${domain}&amp;type=NS`)
        .then(results =&gt; results.json())
        .then(data =&gt; {
          setLoading(false);
          if (data &amp;&amp; data.Answer) {
            data.Answer.sort((a: any, b: any) =&gt; a.data.localeCompare(b.data));
            setNameservers(data.Answer);
          }
        });
    };
  
    return (
      &lt;&gt;
        &lt;Form onSubmit={handleSubmit}&gt;
          &lt;Form.Row&gt;
            &lt;Col /&gt;
            &lt;Col&gt;
              &lt;Form.Control
                type=&quot;text&quot;
                placeholder={formText}
                value={domain}
                onChange={handleChange}
                autoFocus
                required
              /&gt;
            &lt;/Col&gt;
            &lt;Col&gt;
              &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                &lt;FaSearch /&gt; Search
              &lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/Form.Row&gt;
        &lt;/Form&gt;
        &lt;hr /&gt;
        {submitted &amp;&amp;
          nameservers.map((server: any, index: number) =&gt; (
            &lt;li key={index}&gt;{server.data}&lt;/li&gt;
          ))}
  
        {submitted &amp;&amp; nameservers.length === 0 &amp;&amp; &lt;small&gt;Error&lt;/small&gt;}
  
        {loading &amp;&amp; (
          &lt;Container className=&quot;text-center&quot;&gt;
            &lt;Spinner animation=&quot;grow&quot; size=&quot;sm&quot; /&gt;
            &lt;Spinner animation=&quot;grow&quot; size=&quot;sm&quot; /&gt;
            &lt;Spinner animation=&quot;grow&quot; size=&quot;sm&quot; /&gt;
          &lt;/Container&gt;
        )}
      &lt;/&gt;
    );
  };
  
  export default SearchForm;
  </code></pre>