if else conditional statments in react

Question

i have a simple app with a single value, 2 buttons and 3 divs. The value variable starts at 0, the buttons either increases or decrease the value, i have 3 divs; small, medium & large. i need to render a div based on the value. if the value is 20, the large div, value less than or equal to 10, medium div, if less than 10, small div.

My goal here is to render a view based on an input from the user.

Here is my code

import React, { useState, useEffect } from 'react';

const ShowHide = () => {
  const [value, setValue] = useState(0);
  const [lrg, setLrg] = useState(false);
  const [mid, setMid] = useState(false);
  const [sml, setSml] = useState(true);
 
  
  if (value >= 20 ) {
    setLrg(true) 
    setMid(false) 
    setSml(false)
  }

  if ( value >= 10  && value <= 20) {
    setLrg(false) 
    setMid(true) 
    setSml(false)
  }

  if (value < 10 ) {
    setLrg(false) 
    setMid(false) 
    setSml(true)
  }

  return <>

  <h3>show/hide div</h3>
  <div>
    <h3> value is  :{value}</h3>
    <button className='btn' onClick={() => {setValue(value + 5)}}> add </button>
    <br></br>
    <button className='btn' onClick={() => {setValue(value - 5)}}> minus </button>
  </div>
  <br></br>
  <div className="form"> 
    {lrg && <Lrg />}
    {mid && <Mid />}
    {sml && <Sml />}
  </div>
  </>;
};

 

const Lrg = () => {
  return (
      <div>
    <h3> value is larger than 20</h3>
  </div>
  );
}

const Mid = () => {
  return (
      <div>
    <h3> value is btwn 10 and 20</h3>
  </div>
  );
}

const Sml = () => {
  return (
      <div>
    <h3> value is less than 10</h3>
  </div>
  );
}
export default ShowHide;

To make it work, i have defined 3 other variables, sml, med, lrg. that start at false for lrg and med since the value starts at 0, and true for sml since value is 0. when the values change, i want to update these var accordingly. however i get this error

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

It comes after i add the if else statements, how do i create some conditions without that error

jmargolisvt · Accepted Answer · 2020-11-26 18:30:01Z

3

Get rid of all your useStates except for [value, setValue]. Then in your JSX:

    {value >= 20 && <Lrg />}
    {value < 20 && value >= 10 && <Mid />}
    {value < 10 && <Sml />}

answered Nov 26, 2020 at 18:30

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Δ O Over a year ago

How about a single statement with ternary operators { value >= 20 ? <Lrg /> : value < 10 ? <Sml /> : <Mid /> }

jmargolisvt Over a year ago

While that does work, I play by eslint rules which forbid nested ternaries. eslint.org/docs/rules/no-nested-ternary

Δ O Over a year ago

Oh I see. That's a shame, tho. I often use this to shorthand if-else statements. I figure { value >= 20 && <Lrg /> || value < 10 && <Sml /> || <Mid /> } wouldn't be perceived much better :-) Your answer is very straight forward, but I don't like it's missing elses, leading to both unnecessary comparisons and more "manual integrity load" for the coder.

michael · Accepted Answer · 2020-11-26 18:33:54Z

You don't need to use state for checking value range.

import React, { useState } from 'react';

const ShowHide = () => {
  const [value, setValue] = useState(0);
  const isSml = value < 10;
  const isMid = value >= 10 && value <= 20;
  const isLrg = value > 20;

  return (
    <>
      <h3>show/hide div</h3>
      <div>
        <h3> value is :{value}</h3>
        <button
          className="btn"
          onClick={() => {
            setValue(value + 5);
          }}
        >
          {' '}
          add{' '}
        </button>
        <br></br>
        <button
          className="btn"
          onClick={() => {
            setValue(value - 5);
          }}
        >
          {' '}
          minus{' '}
        </button>
      </div>
      <br></br>
      <div className="form">
        {isLrg && <Lrg />}
        {isMid && <Mid />}
        {isSml && <Sml />}
      </div>
    </>
  );
};

const Lrg = () => {
  return (
    <div>
      <h3> value is larger than 20</h3>
    </div>
  );
};

const Mid = () => {
  return (
    <div>
      <h3> value is btwn 10 and 20</h3>
    </div>
  );
};

const Sml = () => {
  return (
    <div>
      <h3> value is less than 10</h3>
    </div>
  );
};
export default ShowHide;

allphonsk · Accepted Answer · 2020-11-26 19:15:21Z

i played with it, untill i got some other version

import React, { useState, useEffect } from 'react';
    
     
    const ShowHide = () => {
      const [value, setValue] = useState(0); 
    
      return <> 
      <h3>show/hide</h3>
      <div>
        <h3> value is  :{value}</h3>
        <button className='btn' onClick={() => {setValue(value + 5)}}> add </button>
     
        <button className='btn' onClick={() => {setValue(value - 5)}}> minus </button>
      </div>
      <br></br>
      <div className="form"> 
        <Answr num={value}/>
      </div>
       
      </>;
    };
    
     
     
     
    
    const Answr = ({num }) =>{
      if (num >= 20){ 
      return (
        <div> 
        <h3> value is greater than 20</h3>
        </div>
        );
     }
      else if (num >= 10 && num < 20 ) {
         return (
          <div> 
           <h3> value is between 10 and 20</h3>
          </div>
        );
     } else {
            return (
          <div> 
           <h3> value is less than 10 </h3>
          </div>
        );
     }
    };
    export default ShowHide;

Collectives™ on Stack Overflow

if else conditional statments in react

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related