"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

The embedded Google iframe is causing unnecessary padding at the bottom of the page

Place CSS elements in relation to the underlying element

Ensuring the accuracy of data sent to an API server through a POST request from an app

Adjust the content to expand and occupy the entire height using Material UI cut-off Drawer

Difficulties encountered while attempting to modify a class using Javascript

I was baffled by the sudden closure of the connection and couldn't determine the reason behind it

What CSS property prevents a fixed header from overlapping a scrolled element?

Using force-directed layout to access and retrieve specific data from external or internal data sources

In what situations is it essential to utilize the `rerender` function in the React Testing Library?

Struggling to eliminate margins in a React web application

Struggling to activate the link:hover transformation

Enhancing the SVG font size through custom CSS styling

Encountering an error in React when attempting to convert a class component to a function

GSAP TimelineLite is not being loaded correctly by NPM and Webpack

After refreshing the page, the console log within the React useEffect function ceases to function

Employing bootstrap to include oversized images within a compact, fixed div

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

Gatsby: Retrieving JSON data following the initial loading of the page

What is the proper way to create a React Context in TypeScript that accepts both a ref and a setState function as arguments?

Accordions housing Bootstrap 3 pills in a sleek design