The server returns the response to the front in the form of values, how to change the styles depending on these values?

Question

JavaScript

Hello. Just started learning JS and got a practice exercise that I can't handle.
I ask for your help. There is a field in the interface where, after a request for a back, it returns a response from the back in the form of values ​​according to the status of the project, for example, the status is "correct", "conflict", "critical conflict".
Depending on the returned response, you need to set styles for the text, for example, each value has its own color, link, underline, etc.
These values ​​are not on the front, only the back sends them.
Well, for example, for a critical conflict, you need to set the red color.
How to set styles for each response option from the server if these values ​​​​are not stored at the front.
description of the block where the response is returned below.
If it is not clear on my piece of code, how is this done in theory?

<div classname="project_info">
<TextField
disabled
value={projectData.statusName}
id=statusName
label="Статус проекта"
onChange={this.changeHandler}
fullwidth
/>

Answer 1

In general, it looks like you still have a limited set of states that can be described in advance by classes in styles and switch these classes according to the response from the server.
But if, nevertheless, the styles are determined by the server in each specific case, then you can generate them on the fly. True, there is a problem with the fact that such styles are not edited through devtools (although something may have changed now). A few years ago, I faced a similar task, when styles for some UI display options were set by users, then I wrote this module to solve this problem:
https://gist.github.com/bingo347/cb8e62606e206c009...

Answer 2

These values ​​are not on the front, only the back sends them.

You may not have a CURRENT state, but you should have a list of all states on the front, otherwise how will you know what a certain status should look like?
Well, or a more "perverted" and IMHO not entirely correct option - to transfer from the backend, in addition to the status, also a property, for example, a class that needs to be assigned to an element with data, or just a color for highlighting ... But anyway - there should be at least this class is created, and indeed such garbage violates the separation of data and display. Conventionally, if your frontend changes tomorrow, then you will be forced to transfer classes from the old display. It's not that it's a big problem, but it's worth avoiding this behavior.