title: is there a way to import API data from one file to another one in React?
body: <p>So I'm working on this app that as soon as you search up a shoe brand it takes you to a page that gives you a grid of the different types of shoes that brand has.</p>
  <p>This is the API search bar function that's located in the searchBar.js file:</p>
  <pre><code>
  function SearchBar() {
  
    const [isLoaded, setIsLoaded] = useState(false);
    const [brand, setBrand] = useState(&quot;&quot;);
    const [sneakers, setSneakers] = useState({});
    const [redirect, setRedirect] = useState(false)
  
    const brandsList = [
      { brandName: &quot;Adidas&quot; },
      { brandName: &quot;Asics&quot; },
      { brandName: &quot;Converse&quot; },
      { brandName: &quot;Jordan&quot; },
      { brandName: &quot;New Balance&quot; },
      { brandName: &quot;Nike&quot; },
      { brandName: &quot;Puma&quot; },
      { brandName: &quot;Reebok&quot; },
      { brandName: &quot;Saucony&quot; },
      { brandName: &quot;Under Armour&quot; },
      { brandName: &quot;Vans&quot; }
    ]
    const defaultBrands = {
      options: brandsList,
      getOptionLabel: (option) =&gt; option.brandName,
    };
  
  
    const search = (evt) =&gt; {
      if (evt.key === &quot;Enter&quot;) {
        fetch(
          `https://api.thesneakerdatabase.com/v1/sneakers?limit=10&amp;brand=${brand}`
        )
          .then((res) =&gt; res.json())
          .then((result) =&gt; {
            setIsLoaded(true);
            setBrand(&quot;&quot;);
            setSneakers(result);
            console.log(result.results);
            setRedirect(true)
          });
      }
    };
    return (
      &lt;div&gt;
        &lt;div&gt;
          {
            redirect ? &lt;Redirect to=&quot;/allShoes:id&quot; /&gt; : &lt;div className=&quot;brand-search&quot;&gt;
              &lt;div className=&quot;search-box col&quot;&gt;
                &lt;Autocomplete
                  {...defaultBrands}
                  id=&quot;auto-complete&quot;
                  autoComplete
                  includeInputInList
                  renderInput={(params) =&gt;
                    &lt;TextField {...params}
                      placeholder=&quot;Search brand...&quot;
                      margin=&quot;normal&quot;
                      onChange={(e) =&gt; setBrand(e.target.value)}
                      value={brand}
                      onKeyPress={search}
                    /&gt;}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          }
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default SearchBar;
  
  
  </code></pre>
  <p>and I'm trying to the api data into the allShoes.js file once you search a brand:</p>
  <pre><code>
  import React from &quot;react&quot;;
  import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardFooter, MDBCardText } from &quot;mdbreact&quot;;
  import FavoriteIcon from '@material-ui/icons/Favorite';
  import NotesIcon from '@material-ui/icons/Notes';
  
  import &quot;../allShoes/allShoes.css&quot;;
  
  
  function gridTable(props) {
  
  return (
      
      &lt;div&gt;
      
      &lt;MDBContainer style={{textAlign:&quot;center&quot;, marginTop:&quot;8%&quot;}}&gt;
          
          &lt;h2&gt;View All Shoes&lt;/h2&gt;
  
          &lt;MDBRow style={{padding: &quot;6%&quot;}}&gt;
              &lt;MDBCol size=&quot;3&quot;&gt;
              &lt;MDBCard narrow ecommerce className='mb-2'&gt;
              &lt;MDBCardTitle&gt;
                        &lt;strong&gt;
                        {/* {name} */}
                        &lt;/strong&gt;
                      &lt;/MDBCardTitle&gt;
                      &lt;MDBCardImage
                      cascade
                      top
                      src='https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/eric5lwitzffpoisq0rj/blazer-mid-77-vintage-mens-shoe-flCCX4.jpg'
                      alt='shoe photo'
                    /&gt;
                    &lt;MDBCardBody cascade&gt;
                      &lt;MDBCardFooter className='px-1'&gt;
                        &lt;span className='float-left'&gt;
                        {/* {title} */}
                        &lt;/span&gt;
                        &lt;span className='float-right'&gt;
                         &lt;FavoriteIcon&gt;&lt;/FavoriteIcon&gt;
                          &lt;NotesIcon&gt;&lt;/NotesIcon&gt;
                        &lt;/span&gt;
                      &lt;/MDBCardFooter&gt;
                    &lt;/MDBCardBody&gt;
                  &lt;/MDBCard&gt;
              &lt;/MDBCol&gt;
          &lt;/MDBRow&gt;
      &lt;/MDBContainer&gt;
  
  
      &lt;/div&gt;
  );
  }
  
  export default gridTable;
  
  
  </code></pre>