When you click on element (contact), it appears some info in div in right position. Each contact has it’s own info, so it’s unique information for every item of contact-list.
class Contact extends Component{
constructor(props){
super(props);
this.state = {
activeContact: {}
};
this.setActiveContact = this.setActiveContact.bind(this);
}
render() {
return (<li className='contact' onClick={this.setActiveContact}>
<img className='contact_avatar' src={this.props.avatar} width='60px' height='60px' alt='avatar'/>
<div className='contact_name'>{this.props.name}</div>
<div className='contact_job'>{this.props.jobTitle}</div>
</li>);
}
setActiveContact(){
this.setState({
activeContact: ContactFullInfo
});
}
};
class ContactFullInfo extends React.Component {
render() {
return (<div className='info' id='info'>
<img className='' src={this.props.photo} alt='Photo'/>
<div className=''>{this.props.fullname}</div>
<div className=''>Job</div>
<div className=''>{this.props.jobTitle +
this.props.jobCompany}
</div>
<div className=''>Contacts</div>
<div className=''>{this.props.contactEmail +
this.props.contactPhone}
</div>
<div className=''>Address</div>
<div className=''>{this.props.addressStreet +
this.props.addressCity +
this.props.addressZipCode +
this.props.addressCountry}
</div>
</div>);
}
};
class FullInfo extends Component {
render() {
return (
<div>
{
this.state.activeContact
(function (item) {
return(
<ContactFullInfo
photo={item.general.avatar}
fullname={item.general.firstName + ' ' + item.general.lastName}
jobTitle={item.job.title}
jobCompany={item.job.company}
contactEmail={item.contact.email}
contactPhone={item.contact.phone}
addressStreet={item.address.street}
addressCity={item.address.city}
addressZipCode={item.address.zipCode}
addressCountry={item.address.country}
/>)
})
}
</div>
);
}
}
;
I think that it isn’t a good idea to write ‘FullInfo’ or ‘ContactFullInfo’ in setState which is in function setActiveContact, but what should i do? It isn’t work!
…