"Implementing a form submission feature in React.js that dynamically applies a class to the result element

Question

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-components for this purpose). However, I am facing challenges determining the appropriate location to integrate this functionality, whether within the Form or Result component, and what methodologies to employ (I reviewed the classNames library but found it difficult to grasp based on the provided examples). Any guidance from fellow developers would be greatly appreciated.

Form element

 // Code for Form component...

Result element

// Code for Result component...

Thank you in advance for any assistance you can provide.

css reactjs styled-components classname class-names

Answer 1

Answer №1

Consider incorporating an additional useState hook to manage a danger state:

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

Then, if the result indicates an unhealthy BMI, update the danger state to true:

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

Finally, customize the styling based on the value of the danger state:

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

You could also consider utilizing styled-components and passing a prop such as isHealhty to the Result component for conditional rendering based on health status.

Answer 2

Consider incorporating an additional useState hook to manage a danger state:

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

Then, if the result indicates an unhealthy BMI, update the danger state to true:

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

Finally, customize the styling based on the value of the danger state:

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

You could also consider utilizing styled-components and passing a prop such as isHealhty to the Result component for conditional rendering based on health status.

Answer 3

Answer №2

To start, establish a new class and utilize setState to keep the code up-to-date.

const [category, setCategory] = useState(0);

Within your decision-making code, assign the class accordingly. You have the freedom to use your own codes or strings, but for this example, numbers are used.

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

Include the category as a prop in the result component

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

Subsequently, inspect the result component and tailor the design of the component to match

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

Answer 4

To start, establish a new class and utilize setState to keep the code up-to-date.

const [category, setCategory] = useState(0);

Within your decision-making code, assign the class accordingly. You have the freedom to use your own codes or strings, but for this example, numbers are used.

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

Include the category as a prop in the result component

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

Subsequently, inspect the result component and tailor the design of the component to match

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

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

Answer №1

Answer №2

Similar questions

Error: An issue occurred when trying to access a property while passing in a prop

Twilio SDK integration for reply extensions featuring a customized dial pad functionality

What is the best way to ensure that my image completely occupies the div?

What causes the image to not appear at the center bottom of the page when using IE for loading?

How can I trigger an audio element to play using onKeyPress and onClick in ReactJS?

Transmit data from list items in the HTML to a form

When the enter key is pressed in a contenteditable div, line breaks are disregarded

What is the correct way to include '?i#efix' in a font directory path in a Rails application?

What is the best way to connect the "areaName" with the <TextBox> attributes value="" and onChange=""?

Oops! Looks like there was a problem: setShowCatMenu function is not defined

Ways to center a spinner on the screen using CSS during loading

Issue encountered while utilizing a MUI select component to display the correct element

Is it possible to place a div and a heading side by side within the same line?

Exploring the World of Print CSS, Embracing Bootstrap, and Master

When using the e.target.getAttribute() method in React, custom attributes may not be successfully retrieved

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Mastering the art of reading rows in ASP.NET using Java Script

Retrieve data that resets to undefined upon reloading from an array

A request sent from a react.js frontend is being processed as a GET request on a node

What is the best way to store a small number of files in the state