Conditional rendering inside return in functional component

user_8443899 0
Viewed 174

How to conditionally render an element inside return in functional component. I don't want to duplicate the NewWindow component two times.

  return (
    <NewWindow
      onUnload={props.closeGradeReport}
      features={{ height: 500, width: 2500 }}
      title='Grade Report Chart'
    >
      <div className='grade-report-chart'>
        <div className='grade-report-chart-header'>
          // I want to render Loading.... or p element inside return
          { 
            isLoading ? <div> Loading...</div> : 
          <p> {selectedUser.name} ({selectedCohort})</p>
          }
        </div>
      </div>
    </NewWindow>

I know I can return Loading... inside NewWindow but I don't want to duplicate the component.

reactjs
1 Answers

refactor by using Fragment 

 return (
    <Fragment>
      {isLoading ? (
        <div> Loading...</div>
      ) : (
        <NewWindow
          onUnload={props.closeGradeReport}
          features={{ height: 500, width: 2500 }}
          title="Grade Report Chart"
        >
          <div className="grade-report-chart">
            <div className="grade-report-chart-header">
              <p>
                {selectedUser.name} ({selectedCohort})
              </p>
            </div>
          </div>
        </NewWindow>
      )}
    </Fragment>
  );
user_128901730
Related