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.