Call a function in a component from antoher file in react - reactjs

Question

I'm learning reactjs and I'm stuck calling a function in another component.
I did:
import moment from 'moment';
import WeatherLocation from './../components/WeatherLocation'
const transformForecast = datos =>(
datos.list.filter(item => (
moment.unix(item.dt).utc().hour() === 6 ||
moment.unix(item.dt).utc().hour() === 12 ||
moment.unix(item.dt).utc().hour() === 18
)).map(item => (
{
weekDay: moment.unix(item.dt).format('ddd'),
hour: moment.unix(item.dt).hour(),
data: WeatherLocation.getDatos(item)
}
))
);
export default transformForecast;
getDatos is a function in WeatherLocation, I exported WeatherLocation but I don't know what if that calling is correct.
WeatherLocation component:
const api_key = "bb7a92d73a27a97e54ba00fab9d32063";
class WeatherLocation extends Component{
constructor({ city }){
super();
this.state = {
city,
primero: null
}
}
getWeatherState = weather => {
const { id } = weather[0];
if (id < 300){
return THUNDER;
}else if (id < 400){
return DRIZZLE;
}else if (id < 600){
return RAIN;
}else if (id < 700){
return SNOW;
}else if (id >= 800){
return SUN;
}else{
return CLOUDY;
}
};
getTemp = kelvin =>{
return convert(kelvin).from('K').to('C').toFixed(2);
}
getDatos = (weather_data) =>{
const {weather} = weather_data;
const {humidity, temp} = weather_data.main;
const {speed} = weather_data.wind;
const weatherState = this.getWeatherState(weather);
const temperature = this.getTemp(temp);
const primero = {
humidity,
temperature,
weatherState,
wind: `${speed}`,
}
return primero;
};
componentWillMount() {
this.handleUpdateClick();
}
handleUpdateClick = () => {
const {city} = this.state;
const urlTiempo = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;
fetch(urlTiempo).then(primero => {
return primero.json();
}).then(weather_data => {
const primero = this.getDatos(weather_data);
this.setState({primero});
});
};
render = () => {
const {onWeatherLocationClick} = this.props;
const {city, primero} = this.state;
return (
<div className='weatherLocationCont' onClick = {onWeatherLocationClick}>
<Location city={city}/>
{primero ? <WeatherData datos = {primero}/> : <CircularProgress size={60} thickness={7} />}
</div>);
};
}
WeatherLocation.propTypes = {
city: PropTypes.string.isRequired,
onWeatherLocationClick: PropTypes.func
}
export default WeatherLocation;
As you can see I want to reuse getDatos because I'm going to need those variable in transformForecast.
I will appreciate your help, thanks.

Answer 1

WeatherLocation is a React component, not a plain JS object, so you can't just call its internal functions as you please: as just a class definition there is nothing to call yet, you need an instance.
So, you'll need to create an actual <WeatherLocation.../> component on your page/in your UI, and then use the WeatherLocation's documented API for getting its data based on changes in the component, passing it on to whatever is calling the transformForecast function.

Answer 2

Object.Method() call is not allowed here. You need to create a React Stateful or Stateless component and pass props to it from the parent component. Let us say, WeatherLocation is your parent component and transformForecast is the child component. You can do something like this to call your method in WeatherLocation component.
Parent Component:
class WeatherLocation extends React.Component {
constructor(props) {
super(props);
this.state = {
datos: []
};
this.getDatos = this.getDatos.bind(this);
};
getDatos = (item) => {
console.log(item);
};
render() {
return (
<div>
<TransformForecast
getDatos={this.getDatos}
datos={this.state.datos}
/>
</div>
)
}
}
export default WeatherLocation;
Child Component:
const TransformForecast = (props) => {
return (
props.datos.list.filter(item => (
moment.unix(item.dt).utc().hour() === 6 ||
moment.unix(item.dt).utc().hour() === 12 ||
moment.unix(item.dt).utc().hour() === 18
)).map(item => (
{
weekDay: moment.unix(item.dt).format('ddd'),
hour: moment.unix(item.dt).hour(),
data: props.getDatos(item)
}
))
);
};
export default TransformForecast;
Note: This code might not be the right away working code as I'm not sure of the data and API's called. This is just to illustrate to solve your problem.
Hope this helps.