Clash Royale CLAN TAG#URR8PPP

Call a function in a component from antoher file in react

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.

getDatos

WeatherLocation

WeatherLocation

WeatherLocation component:

WeatherLocation

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.

getDatos

I will appreciate your help, thanks.

2 Answers
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) => ;

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.

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.

WeatherLocation

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.

<WeatherLocation.../>

transformForecast

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.