Need to pass the value for same component - reactjs

Question

I need to pass value for same component
I need to pass my value here
<tr>
<td><b>Past</b></td>
<td className="hrs_applicant_data"><b>tes</b></td>
</tr>
Here Is my code
import React, { Component } from 'react';
import axios from 'axios';
import {UIPageSubNav} from '../../helpers/UI';
import {SpaceDiv} from '../../helpers/Generic';
//import ViewJobs from './ViewJobs';
//import PostJob from './PostJob';
import ViewApplicantDetails from './ViewApplicantDetails';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import {Tabs, Tab} from 'react-bootstrap-tabs';
import Popup from 'react-popup';
export default class ViewApplicants extends Component {
constructor(props) {
super(props);
this.state = {
//applicantResults:[],
//searchExperiencesResults: [],
//searchMessagesResults: [],
jobTitleList: null
};
}
// onReloadPage(callbackRef) {
// console.dir(callbackRef);
// this.onGetApplicants(callbackRef);
// }
onClickFitStaus(){
}
onClickApplicantDetails(personId){
console.log(personId.props.applicantData.PersonId);
var personId = personId.props.applicantData.PersonId;
var self = this;
axios.get(window.mg.api.baseURL + 'applicantdetails' + '/'+ personId, { // use id because personId != id
})
.then(function (response) {
var items = [];
var Element = [];
var index = [];
var experience: []
//console.log(response.data.results.experience);
var experience = response.data.results.experience;
console.log(experience);
//return false;
var applicantResult = response.data.results.main[0];
var id = personId;
//console.log(experience);
// self.setState({applicantResults: response.data.results.main[0]});
// self.setState({searchMessagesResults: response.data.results.message});
// self.setState({searchExperiencesResults: response.data.results.experience});
// let mySpecialPopup = Popup.register({
// title: 'I am special',
// content: 'Since I am special you might need me again later. Save me!',
// buttons: {
// left: ['cancel'],
// right: ['ok']
// }
// });
// Popup.alert('Hello');
// Popup.create({
// title: 'Immediate popup',
// content: 'This popup will be displayed straight away',
// className: 'alert',
// buttons: {
// right: ['ok']
// }
// }, true);
//Popup.queue(mySpecialPopup);
window.mg.popupRef.customPopup(
<ViewApplicantDetails applicantData={applicantResult} pid={id} customPopup={true} />
);
//check if we need to tell the callee to update too (React's smart update needed or not doesn't alway work the way I want)
})
.catch(function (error) {
console.log('error');
console.dir(error);
window.mg.popupRef.alert('Error getting data, please try again in a minute.');
});
}
// onClick(e) {
// // passes our data back up to the Employees component
// this.props.onClickRef(this.props.applicantData);
// }
onClickUpdateFit(fitStatus, personId){
// if (this.props.hasOwnProperty('userData') === false) {
// return (<div></div>);
// }
console.log(personId);
console.log(this.props.screenData);
var userId = 2;
axios.post(window.mg.api.baseURL + 'fitstatusupdate', {
headers: {
'X-CSRF-TOKEN': window.mg.api.token,
'Content-Type':'application/x-www-form-urlencoded'
},
params: {
personId: personId,
fitStatus: fitStatus,
message: null,
userId: userId
}
}).then(response => {
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
console.log('Error', thrown.message);
}
});
}
render() {
var self = this;
var applicant = this.props.applicantData;
const jobtitle = this.state.jobTitleList;
console.log(applicant);
return (
<div className="hrs_applicant_main_container">
<div className="sod_applicant_container">
<div className="sod_job_company_logo">
<img src={applicant.imgUrl} />
</div>
<div className="sod_job_details">
<div className="sod_job_header">
<div className="sod_job_info">
<h3 onClick={this.onClickApplicantDetails.bind(applicant.personId,this)}>{applicant.Name}</h3>
<span>{applicant.location}, {applicant.country}</span>
</div>
<div className="sod_job_salary">
<div>
<span><b>Date Uploaded</b></span>
<span>{applicant.created_at}</span>
</div>
</div>
<div className="sod_job_location">
<img src="../../images/icon_upload.png" />
<div>
<span><b>CV</b></span>
</div>
</div>
</div>
<div className="sod_job_content">
<div className="hrs_applicant_details">
<table className="hrs_applicant_datas">
<tr>
<td><b>Current</b></td>
<td className="hrs_applicant_data"><b>{applicant.created_at}</b></td>
</tr>
<tr>
<td><b>Past</b></td>
<td className="hrs_applicant_data"><b>tes</b></td>
</tr>
<tr>
<td><b>Education</b></td>
<td className="hrs_applicant_data"><b>CIPD, MCIPD | 2013</b></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div className="hrs_applicant_action">
<div className="BTNFilled BTNOutlineFilled" onClick={() => this.onClickUpdateFit(0, applicant.PersonId)}>
<i class="fa fa-times"></i> <img src="/images/img_close.png" alt="" className="notFitIconImg" />
NOT A FIT
</div>
<div className="BTNFilled BTNOutlineFilled" onClick={() => this.onClickUpdateFit(1, applicant.PersonId)}>
<img src="/images/img_tick.png" alt="" className="fitIconImg" />
GOOD FIT
</div>
<div className="BTNFilled BTNOutlineFilled" onClick={this.onClickApplicantDetails.bind(applicant.personId,this)}>
<img src="/images/message-icon.png" alt="" className="fitIconImg" />
MESSAGE
</div>
<div className="BTNFilled BTNOutlineFilled DropdownButton">
<Dropdown options={jobtitle} onChange={this._onSelect} placeholder="ASSOCIATE TO JOB POSTING" />
</div>
</div>
</div>
)
var BTNStyle = {};
BTNStyle.marginRight = "10px";
BTNStyle.marginLeft = "0px";
BTNStyle.marginBottom = "30px";
}
}

Answer 1

Experience is a list of values right so you can display those values through map function. I will give one example below
this.state.experience = [{name:"anu",age:"21",email:"anu#gmail.com"},{name:"sai",age:"21",email:"sai#gmail.com"}]
render(){
return(
this.state.experience.map((user,index)=>{
return <p key={index}>{user.name} </p>
})
)
}