title: How to filter array and rerendering results in ReactJS
body: <p><a href="https://i.stack.imgur.com/vCXxE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vCXxE.jpg" alt="enter image description here" /></a>I'm building a finance stock exchange website, I'm currently trying to filter results according to a select menu and rerendering the results in ReactJs. My filter function is working and find the correct answer but the re-rendering make the whole website crash and I don't know why. If anyone could help I'll be more than glad ;)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  import { useAuth0 } from "@auth0/auth0-react";
  import "../style/content.css";
  import LoginButton from "./LoginButton";
  import Modal from "./Modal";
  var axios = require("axios").default;
  
  const StockContent = () =&gt; {
    const { isAuthenticated } = useAuth0();
    const [datas, setDatas] = useState([]);
    const [selectFil, setSelectFil] = useState("");
    const [isOpen, setIsOpen] = useState(false);
  
    useEffect(() =&gt; {
      var options = {
        method: "GET",
        url: "https://run.mocky.io/v3/6daa5c5c-4c1b-4bce-8596-c604fa9f52dc",
        params: { modules: "defaultKeyStatistics,assetProfile" }
      };
  
      axios
        .request(options)
        .then(function (response) {
          var results = response.data.marketSummaryResponse.result;
          setDatas(results);
          console.log(results);
        })
        .catch(function (error) {
          console.error(error);
        });
    }, []);
  
    const handleChange = (e) =&gt; {
      debugger;
      setSelectFil(e.target.value);
    };
  
    const findMatch = (selected) =&gt; {
      debugger;
      const matchData = datas.find((data) =&gt; data.exchange === selected);
      setDatas(matchData);
    };
  
    return (
      &lt;&gt;
        {isAuthenticated ? (
          &lt;&gt;
            &lt;div className="title"&gt;
              &lt;h1&gt;
                Market Summary &lt;i class="fas fa-chart-pie"&gt;&lt;/i&gt;
              &lt;/h1&gt;
            &lt;/div&gt;
            &lt;div className="filter_sec"&gt;
              &lt;h3&gt;Filter Results&lt;/h3&gt;
              &lt;br&gt;&lt;/br&gt;
              &lt;select name="exchange" id="stock" value={selectFil} onChange={handleChange}&gt;
                {datas.map((data, i) =&gt; {
                  return &lt;option&gt;{data.exchange}&lt;/option&gt;;
                })}
              &lt;/select&gt;
              &lt;select name="market" id="mark"&gt;
                {datas.map((data, i) =&gt; {
                  return &lt;option value="market"&gt;{data.market}&lt;/option&gt;;
                })}
              &lt;/select&gt;
              &lt;button onClick={() =&gt; findMatch(selectFil)}&gt;Filter&lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="card_content"&gt;
              {datas &amp;&amp;
                datas.map((data, i) =&gt; {
                  return (
                    &lt;div
                      key={i}
                      style={{
                        height: "200px",
                        width: "600px",
                        alignItems: "center",
                        margin: "20px 30px",
                        borderRadius: "20px",
                        backgroundColor: "rgba(98, 98, 98, 0.479)"
                      }}
                    &gt;
                      &lt;div className="card_info"&gt;
                        &lt;div className="logo_sn"&gt;
                          &lt;h4 id="stock_sn"&gt;{data.shortName}&lt;/h4&gt;
                          &lt;div className="logo"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div className="card_info_det"&gt;
                          &lt;h4&gt;Exchange : {data.exchange}&lt;/h4&gt;
                          &lt;h4&gt;Market : {data.market}&lt;/h4&gt;
                          &lt;h4&gt;TimeZone : {data.exchangeTimezoneName}&lt;/h4&gt;
                          &lt;h4&gt;Change Rate : {data.regularMarketChangePercent.fmt}&lt;/h4&gt;
                          &lt;h4&gt;Market Price :{data.regularMarketPrice.fmt} $&lt;/h4&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
                          &lt;Modal
                            exchange={data.exchange}
                            exchangeDelay={data.exchangeDataDelayedBy}
                            exchangeMilisec={data.firstTradeDateMilliseconds}
                            marketState={data.marketState}
                            priceHint={data.priceHint}
                            quoteSrcN={data.quoteSourceName}
                            quoteType={data.quoteType}
                            regMarketChF={data.regularMarketChange.fmt}
                            regMarketChR={data.regularMarketChange.raw}
                            regMarketPrevCF={data.regularMarketPreviousClose.fmt}
                            regMarketPrevCR={data.regularMarketPreviousClose.raw}
                            regMarketTimeF={data.regularMarketTime.fmt}
                            regMarketTimeR={data.regularMarketTime.raw}
                            shortName={data.shortName}
                            srcInter={data.sourceInterval}
                            symbol={data.symbol}
                            tradeable={data.tradeable}
                            trigger={data.triggerable}
                            isOpen={isOpen}
                            onClose={(e) =&gt; setIsOpen(false)}
                          /&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  );
                })}
            &lt;/div&gt;
          &lt;/&gt;
        ) : (
          &lt;div className="not_logged_page"&gt;
            &lt;h1&gt;Welcome to Finance Stock &lt;/h1&gt;
            &lt;LoginButton /&gt;
          &lt;/div&gt;
        )}
      &lt;/&gt;
    );
  };
  
  export default StockContent;</code></pre>
  </div>
  </div>
  </p>