如何根据 If 条件的结果渲染 React 组件？

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

Answer 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>
)

Answer 2

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>
);

ie

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>
);

ie

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)