title: React useEffect equivalent in class component
body: <p>I have a React functional component that does the following:</p>
  
  <ul>
  <li>Sends a POST to load raw data from my API</li>
  <li>(Among other stuff) sends <strong>mapped</strong> data to a custom table component</li>
  <li>Allows the user to re-send the POST with a different fiter</li>
  </ul>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import axios from "axios";
  import mytable from "./mytable";
  
  const baseRawData = [
    { name: "name", value: "John Doe" },
    { name: "sex", value: "M" }
  ];
  
  export default function FuncComp() {
    let [rawData, setRawData] = useState(baseRawData);
    let [mappedData, setMappedData] = useState([]);
    let [apiFilter, setApiFilter] = useState("all");
  
    useEffect(() =&gt; {
      setMappedData(
        rawData.map(e =&gt; ({
          ...e
          // Some logic
        }))
      );
    }, [rawData]);
  
    useEffect(() =&gt; {
      axios.post(`/my/api/${filter}`).then(({ data }) =&gt; {
        setRawData(data);
      });
    }, [apiFilter]);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;The filter is '{apiFilter}'&lt;/h1&gt;
        &lt;mytable data={mappedData} /&gt;
        &lt;input
          value={apiFilter}
          onBlur={e =&gt; setApiFilter(e.target.value)}
          type="text"
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>How would I, in a class component, achieve the same logic as <strong>useEffect</strong> to map the newly received raw data every time the user changes the filter and new raw data is received?</p>