CODEWITHSUNDEEP
javascriptreactjs
Gnanaseelan
Gnanaseelan

Reputation: 404

How to compare /give codition for Array map -react js

How to compare or give condition to array map here my coding .

this is my state :

  export class RightCollBar extends Component {
      constructor(props) {
        super(props);
        this.state = {
          display: false,
          data: [],
          tomodata:[],
          poyaArray:[],


        };
      }

Here is my life cycle method:

componentWillMount() {
    this.getAbsentDet();
    this.getAbsentDetTomo() ;
    this.getCompanyHolydayLeave();
  }

This code for get today absent(here only employee f_name,l_name,leave date ... ) details of employee data from back end loopback:

getAbsentDet() {
    this.props.actions.getAbsentDetails().then(() => {
      if (!this.props.common.getAbsentDetailsPending) {
        this.setState({ data: this.props.common.absDetails.emp  });
           {console.log( 'my data array:',this.state.data )}
      }
    });
  }

This is get holy day details of company (here only holy day date and and discription) form back end loopback;

  getCompanyHolydayLeave() {
  this.props.actions.getCompanyLeaveDetails().then(() => {
    if (!this.props.common.getCompanyLeaveDetailsPending) {

      this.setState({ poyaArray: this.props.common.companyLeave });  

    }

  });

}

This coding only show who are leave today(today list ) .i need how to give condition for if today is holy day or if today is saturday or sunday then only show message 'today is holy day' or 'today is saturday,sunday' :This is my array data(today leave list) map code .

      {this.state.data.length !== 0?<ul style={{ marginTop: 30 }}>

                    <h1 style={{fontSize: 16, }}> Today List</h1>  
                        {this.state.data.map(data =>
                            (  
                           <li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
                                <div> 
                                <span>
                                  <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} /></Badge>
                                </span>
                                <span style={{ marginLeft: 10, color: '#036cd2' }}>
                                  {data.f_name} {data.l_name}
                                </span>

                              </div>
                              </li>)

                          )} 
  <div className="check" id="rightMenu" ref="check" style={{ padding: 5 }}>         
   </div>
 </ul> : <div style={{ marginTop: 30, marginLeft: 10, fontSize: 20, borderStyle: 'solid', borderColor: 'black', textAlign: 'center', color: 'lightGray' }}>No one is absent today </div>}

Upvotes: 0

Views: 1597

Answers (2)

Ehsan Heydari
Ehsan Heydari

Reputation: 21

// isHoliday function
const isHoliday = () => {
  const today = new Date()
  const dayOfWeek = today.getDay()
  return (dayOfWeek == 6 || dayOfWeek == 0) // 0 for Sunday, 6 for Saturday
}

...
{this.state.data.map(data => (
  {isHoliday() &&   
   (<li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
      <div> 
        <span>
          <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} />
          </Badge>
        </span>
        <span style={{ marginLeft: 10, color: '#036cd2' }}>
           {data.f_name} {data.l_name}
        </span>
      </div>
    </li>)}
)}

Upvotes: 1

Jordan Enev
Jordan Enev

Reputation: 18664

Before rendering Today's leaves, you can check if the current day is a holiday and if it's you can return the Holiday message and stop executing the rest rendering:

render() {

  if (this.isHoliday()) {
    return <div>Today is Holiday</div>
  }

  return {
    // Here you're rending Today's leaves
    // ...
  }
}

It's on your own to implement this.isHoliday(). According to the details you provided, you should do something like that (pseudo code):

isHoliday() {
  const currentDay = moment()
  const holidays = this.state.poyaArray

  return holidays.find( day => moment(day).isSame(currentDay, 'day')) !== undefined
}

Upvotes: 0

Related Questions