Question: I'm trying to change the color of a SVG based on the tempature, I keep getting the too many re-renders errors. I'm wondering what is the right way to get this code working, i just can't figure it out ?

My code (im trying first to change the id name, to see if its works)

```

export default function Svg({ data }) {
  const [colorTemp, setColorTemp] = useState('red');
  console.log(data);

  if (data > 20) {
    setColorTemp('blue');
  }

  return (
    <svg
      id={colorTemp}
      enable-background="new 0 0 379.181 379.181"
      height="512"
      viewBox="0 0 379.181 379.181" 

```

Answer: 
In this case you do not want to be using state as it will trigger a re-render each time it is changed. Because the value is based only on the `data` prop passed do a simple check like so:

```js
export default function Svg({ data }) {
 let colorTemp = 'red';

 if(data > 20) {
   colorTemp = 'blue'
 }

 return (
   <svg
     id={colorTemp}
     enable-background="new 0 0 379.181 379.181"
     height="512"
     viewBox="0 0 379.181 379.181" 

// ...

```
Try to use `useEffect` hook and set it to take effect when `data` changes:

```
    export default function Svg({ data }) {
      const [colorTemp, setColorTemp] = useState('red');
      console.log(data);

    useEffect(() => {
      data > 20 ? setColorTemp('blue') : setColorTemp('red')
     }, [data])

      return (
        <svg
          id={colorTemp}
          enable-background="new 0 0 379.181 379.181"
          height="512"
          viewBox="0 0 379.181 379.181" 

```