I'm studying react and i'm stuck in a problem.
The point is, i'm developing a component that brings my personal information from a JSON file. Then, i did a method to get my address, and i need to put it inside my personal method, as following:
import React, { Component } from 'react';
import Me from './me.json';
class Basic extends Component {
personal() {
const person = Me.personal.map(function(me, index) {
return (
<div className="Curriculum-header" key={index.toString()}>
<div className="content-left">
<h1 className="name">{me.name}</h1>
<h2>Developer</h2>
<h3 className="age">{me.age} anos</h3>
</div>
<div className="content-middle">
{this.address()} //here's the error... This method's call isn't working
</div>
<div className="content-right">
<img src={me.pic} alt={me.name} />
</div>
</div>
);
});
return ( person );
}
address() {
const enderecos = Me.personal[0].address.map(function(endereco, index) {
return (
<div className="Address-info" key={endereco.toString()}>
<p>{endereco.street + ', ' + endereco.houseNr + ', ' + endereco.complement}</p>
<div id="map" data-lat={endereco.lat} data-long={endereco.long}></div>
</div>
);
});
return ( enderecos );
}
constructor(props) {
super(props);
this.state = {};
this.personal = this.personal.bind(this);
this.address = this.address.bind(this);
}
render() {
return (
<div className="Personal-info">
<h2 className="Curriculum-title">Sobre</h2>
{this.personal()}
</div>
)
}
}
export default Basic;
Someone could help me with this?