Adding class to result element when submitting form [React.js]

Question

created a simple BMI calculator using React.js. Now I am trying to make it so if the result is anything other than healthy BMI the result text will be colored red (I am using styled-components). I'm struggling to figure out where I should attempt to insert it, whether in Form or Result element and what tools to use (I looked at classNames library don't really have an idea based on examples how to use it easily). Would be grateful for anyone's help. Pasting the Form and Result code as this is the most meaningful here.

Form element

  const [height, setHeight] = useState();
  const [weight, setWeight] = useState();
  const [classification, setClassification] = useState();
  const [bmi, setBmi] = useState();

  const calculate = () => {
    const bmi = (weight / (height / 100) ** 2).toFixed(2);
    setBmi(bmi);
    if (bmi < 18.5) {
      setClassification("Underweight");
    } else if (bmi > 18.5 && bmi <= 24.9) {
      setClassification("Healthy");
    } else if (bmi > 24.9 && bmi < 30) {
      setClassification("Pre-obesity");
    } else if (bmi < 35) {
      setClassification("Obesity class I");
    } else if (bmi < 40) {
      setClassification("Obesity class II");
    } else {
      setClassification("Obesity class III");
    }
  };

  const onSubmit = (event) => {
    event.preventDefault();
    calculate();
  };

  return (
    <StyledForm onSubmit={onSubmit}>
      <Formula />
      <StyledTitle>Weight</StyledTitle>
      <StyledInput
        value={weight}
        onChange={({ target }) => setWeight(target.value)}
        required
        min={26}
        max={635}
        placeholder="Enter weight in KG"
      />
      <StyledTitle>Height</StyledTitle>
      <StyledInput
        value={height}
        onChange={({ target }) => setHeight(target.value)}
        required
        min={54}
        max={272}
        placeholder="Enter height in CM"
      />
      <Button />
      <Result bmi={bmi} classification={classification} />
    </StyledForm>
  );
};

export default Form; 

Result element

const Result = ({ bmi, classification }) => {
  return (
    <StyledResultWrapper>
      <StyledResult>{bmi && <>Your BMI is {bmi}</>}</StyledResult>
      <StyledResult>{classification}</StyledResult>
    </StyledResultWrapper>
  );
};
export default Result;

Thank you for your help.

Answer 1

You should add one more useState with, for example, danger state:

    const [danger, setDanger] = useState(false);

then, if result is not healthy BMI you setDanger to true:

    if (classification !== "Healty") {
        setDanger(true);
    } else {
        setDanger(false);
    }

and the last step is styling based on danger state:

    let component = null;
    danger 
    ? 
        component = <Result className="redStyled" ...props />
    :
        component = <Result className="healthyStyled" ...props />
    

something like that... If you use styled-components you can pass prop isHealhty to result and then use if statement the same way to select your component based on healthy or not.

Answer 2

First create a class using setState to update the code.

const [class, setClass] = useState(0);

In your deciding code set the class accordingly. You can use own codes or even string but I am using number.

if (bmi < 18.5) {
      setClassification("Underweight");
      setClass(1);
    } else if (bmi > 18.5 && bmi <= 24.9) {
      setClassification("Healthy");
      setClass(2);
    } else if (bmi > 24.9 && bmi < 30) {
      setClassification("Pre-obesity");
      setClass(3);
    } else if (bmi < 35) {
      setClassification("Obesity class I");
      setClass(4);
    } else if (bmi < 40) {
      setClassification("Obesity class II");
      setClass(5);
    } else {
      setClassification("Obesity class III");
      setClass(6);
    }

pass class as prop in result component

<Result bmi={bmi} classification={classification} class={class} />

Now check in the result component and design the component accordingly

const Result = ({ bmi, classification, class }) => {
  const styles = [{'style of 1'},{'style of 2'},{'style of 3'},{'style of 4'},{'style of 5'},{'style of 6'}];
  return (
    <StyledResultWrapper style={styles[class]}>
      <StyledResult>{bmi && <>Your BMI is {bmi}</>}</StyledResult>
      <StyledResult>{classification}</StyledResult>
    </StyledResultWrapper>
  );
};
export default Result;