React change ClassName based on data

January 27, 2022

I have this code which goes and get the data from API,

const getDevices = async () => {
    const response = await fetch(`${API_URL}`);
    const json = await response.json();
    setData(json);

    for (let i in json) {
      Object.values(json[i].portOn.split(",")).forEach((value) => {
        if (value === "G01") {
          blinkStatus = "blink_me";
        }
}

and also I have this in return which is supposed to change the className:

<div id="portG01" className={blinkStatus}></div>

But it doesn’t work. the DIV doesn’t get the className. No error at all.

I am trying to read the data from database and then change the className according to the data.

This is what I need as result:

<div id="portG01" className="blinkStatus"></div>

>Solution :

You need to have blinkStatus changing trigger a rerender of the component. To do this, you can use state. So you can do:

import React, { useEffect, useState } from "react";

...
const [blinkStatus, setBlinkStatus] = useState();


// useEffect(() => {}, []) is the equivalent of the old componentDidMount
useEffect(() => {
  var value = await ... // get blink status
  setBlinkStatus(value);
}, []);

...

return (
  <div className={blinkStatus}>
   ...
  </div>
);