How to render React Component depending on result of If condition?

Question

Is there any easy way how can I render React component into App.js but based on result from if condition? I have clock app which is supposed to 'ring' when alarm value which I define is equal to current time. This 'ring' effect I want to be that another component ,for example Ring.js will render when current time is equal to alarm time and it will contain text from state a I can simply unmount it by clicking a button.

Here Is my function with condition which is called every second to check if there's value in alarmHours state or not.

  function checkTime(){
   if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
     time.currentSecond === '00'){
      //VALUES ARE EQUAL ,ALARM IS RINGING,RENDER COMPONENT
     }
    }
   }

My first idea was to create empty variable ,and if the condition is fulfilled just simply insert Ring.js component into that variable.

let ring;

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      ring = <Ring />
    }
  }
}

And then, simply render that variable in Return() of App.js ,like this.

Return(
  <div>
    {ring}
  </div>
)

But it doesn't work a nothing is rendered.

I've tried to look in official React documentation ,they have there few examples but I don't really get how to implement that approach in my case. I don't know how to render that component if that condition is fulfilled. Can anybody please help me? I'll appreciate that. Thank you.

Link for codesandbox : https://codesandbox.io/s/rough-paper-xv0wi?file=/src/App.js

You should add a state variable: const [ringing, setRinging] = useState(false);. Further down in your JSX, you use {ringing && <Ring />}. Finally, when the alarm time is reached, you call setRinging(true); — user5734311
– user5734311, Commented Aug 6, 2020 at 14:42

Anthony · Accepted Answer · 2020-08-06 14:39:18Z

1

I would update your checkTime() function to return <Ring /> if it's ready, otherwise return null and then you can just:

return (
  <div>
    {checkTime()}
  </div>
);

i.e.

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      return <Ring />
    }
  }

  return null;
}

ring is no longer needed.

EDIT: additional question in comments

if you want Ring to show when the alarm time has been reached, I would change the pattern and introduce a new boolean state value like const [showRing, setShowRing] = React.useState(false) which is initially set to false. checkTime() would then no longer return any JSX and just also call setShowRing(true) and then you would:

return (
  <div>
    {showRing && <Ring />}
  </div>
);

i.e.

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      setShowRing(true);
    }
  }
}

And wherever you want to remove the <Ring /> you would call setShowRing(false)

edited Aug 6, 2020 at 14:39

answered Aug 6, 2020 at 14:29

Anthony

6,5122 gold badges20 silver badges36 bronze badges

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

7 Comments

Pinnci Over a year ago

Thank you for your answer. It works for now,but after second <Ring /> component dissapears. I need it to stay on screen until i press the button to unmount it. Do you have any solution for that? @Anthony

Anthony Over a year ago

@Pinnci I added an edit to cover this additional scenario

Pinnci Over a year ago

thank you sooo much. Is it possible to separate all this new code in that Rinkg.js file? Like I did it Alarm.js and then I'm just calling it. I mean I would like to add some kind of animation to it ,so to keep code nice and readable it would be nice

Pinnci Over a year ago

I'm trying like for an hour to keep all of the <Ring /> separated from App.js and animate that Ring component and I swear to god it is impossible. I've just tried everything possible.

Anthony Over a year ago

@Pinnci I would try asking a new question to keep it focussed

|

yagizhan.avci · Accepted Answer · 2020-08-06 14:28:08Z

1

Try this:

let ring = <Ring />;

function checkTime(){
  if(time.alarmHours && time.alarmMinutes){
    if(time.currentHour === time.alarmHours && time.currentMinute === time.alarmMinutes && 
    time.currentSecond === '00'){
      return true;
    }
  }
   return false;
}
...

return (
  <div>
   {checktime() ? ring : null}
  </div>
)

answered Aug 6, 2020 at 14:28

yagizhan.avci

1565 bronze badges

Collectives™ on Stack Overflow

How to render React Component depending on result of If condition?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related