I have a unique component that can showcase either an error message or a success message. These are the only two possible "states" it can be in, so the styling is limited to either of these options: for success:
background-color: green;
for error:
background-color: red;
Would it be considered a best practice to have a state for the component that changes the "className" property to either info__success or info__error, with the corresponding styling defined in a CSS file like this:
.jsx
const errorClassName = "info__error";
const successClassName = "info__success";
const [ classState, setClassState ] = useState(errorClassName);
return (
<div className={classState}>Message</div>
)
.css
.info__error {
background-color: red;
}
.info__success {
background-color: green;
}
I am aware that I could use a simple list as a state like below, but it can get messy especially when there are multiple CSS styles to update.
const [ error, setError ] = useState(true);
const style = {
background-color: error ? "red" : "green",
}
return (
<div style={style}>Message</div>
)
Is there a cleaner and more practical way to achieve this without cluttering the code? I am not a fan of adding CSS directly into my JSX files, and I am not a big fan of tailwind either.