Pasted

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import swal from 'sweetalert2';
 
import BusinessListOwner from '../components/BusinessListOwner';
import BusinessNewOwnerModal from '../components/BusinessNewOwnerModal';
import axios from "axios";
 
class BusinessOwner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bizRoleUser:{},
      bizRole:[],
      openModal: false,
    };
  }
  handleModal = (openModel) => {
    this.setState({
      bussiness_owner:[],
      bussiness_role:[],
      openModal: openModel,
    });
  };
 
    componentDidMount() {
      this.getRoleOfBiz();
    }
 
 
    //get role form this api
    getRoleOfBiz= async ()=>{
        const bizID = this.props.business.business.id;
        const roleDataApi = await axios.get(`/get_role_biz/${bizID}`);
        const roles = roleDataApi.data.data.map((position)=>(position.name));
        this.setState({
            bizRole:roles
        });
    }
 
  getRoleEachUser=(ownerList, roleList) =>{
      let ownerInfo={};
      let isFound;
      let accountWithRole = ownerList.map((owner) => {
          isFound=false;
          ownerInfo={};
          roleList.forEach((role)=>{
              if(owner.id===role.account_id){
                  isFound=true;
                  Object.assign(ownerInfo,owner,{biz_role:role.getrole[0].name});
                  // console.log(ownerInfo);
              }
          });
          if(isFound)
              return ownerInfo;
          return Object.assign(ownerInfo,owner,{biz_role:"-"});
      });
      return accountWithRole;
  }
 
  handleUnassignedOwner = async (id) => {
    const url = '/service/request_business';
    const businessId = document.querySelector('meta[name="account-id"]').getAttribute('content');
    try {
      await axios.post(url, {
        businessId,
        type: 'UNASSIGNED_OWNER',
        ownerId: [id],
      });
      swal({
        title: 'request success',
        type: 'success',
        showConfirmButton: false,
        timer: 3000,
      });
    } catch (e) {
      console.log(e);
    }
  };
 
  render() {
      console.log(this.state.bizRole);
      const bizOwner = this.props.business.business.business_owner;
      const bizRole = this.props.business.business.business_roles;
      this.state.bizRoleUser=this.getRoleEachUser(bizOwner,bizRole);
    return (
      <div className="row">
        <div className="col-lg-12">
          <div className="ibox float-e-margins">
            <div className="ibox-title">
              <h5>ข้อมูลบัญชีนิติบุคคล</h5>
              <div className="ibox-tools">
                <a className="btn btn-xs btn-primary" onClick={() => this.handleModal(true)}>
                  <i className="fa fa-pencil" />
                  {' '}เพิ่มพนักงาน
                </a>
              </div>
            </div>
            <div className="ibox-content">
              <table className="table table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>ลำดับที่</th>
                    <th>ชื่อ</th>
                    <th>นามสกุล</th>
                    <th>ตำแหน่ง</th>
                    <th>อีเมล</th>
                    <th />
                  </tr>
                </thead>
                <BusinessListOwner
                  accounts={this.state.bizRoleUser}
                  handleUnassignedOwner={this.handleUnassignedOwner}
                />
              </table>
            </div>
          </div>
        </div>
        <BusinessNewOwnerModal
            business={this.props.business.business}
            bizRole={this.state.bizRole} //pass here
            openModal={this.state.openModal}
            handleModal={this.handleModal}
        />
      </div>
    );
  }
}
 
BusinessOwner.propTypes = {
  business: PropTypes.shape({
    business: PropTypes.object,
  }).isRequired,
};
BusinessOwner.defaultProps = {};
 
function mapStateToProps({ business }) {
  return { business };
}
 
export default connect(mapStateToProps)(BusinessOwner);