title: Too many re-renders. Using switch statement with useState()
body: <p>I have an ErrorBox component that is purely displaying the error with the specified attributes. The expected output should be that depending on the <code>ErrorReason</code> it will display the associated color, icon and info</p>
  
  <pre><code>const ErrorBox = ({ ErrorReason }) =&gt; {
  
    const [status, setStatus] = useState({})
    switch (ErrorReason) {
      case "wrong-password":
        setStatus({
          icon: "lock",
          info: "Incorrect password",
          color: "#fff"
        });
        break;
      case "invalid-email":
        setStatus({
          icon: "cross",
          info: "Invalid email",
          color: "#000"
        });
        break;
      case "too-many-request":
        setStatus({
          icon: "user",
          info: "Too many incorrect requests",
          color: "#bbb"
        });
        break;
    }
  
    return (
      &lt;div &gt;
         &lt;Icon
          type={status.icon}
          style={{ color: `${status.color}` }}
        /&gt;
        {status.info} 
      &lt;/div&gt;
    );
  };
  </code></pre>