How to call/execute method/function from another component react

Question

I will want to know, if is possible call or execute a method or function from another component.

I would like to run asynchronously the function that is the tableInformacion.js, which has a request get, but after the call of thepost request is made that I have in address.js.

address.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';
import {getSolarDayInformation} from './tableInformation.js';

import '../styles/main.css';

class AddressInput extends Component{

    constructor(){    
        super();
        this.state = {
            address: "",
            api:"http://maps.google.com/maps/api/geocode/json?address=",
            direccion: "",
            latitud: "",
            longitud:""          
        };
    } 

    render(){
        return(
            <div> 

                <form>      

                    <input type="text" 
                           value={this.state.address} 
                           onChange={this.updateAdress.bind(this)}
                           placeholder="Escriba la direccion"/>

                    <button onClick={this.getAddressGeo.bind(this)}>Consultar</button> 
                </form>

                <ul className="None-Style">
                    <li><label>Direccion:</label>{this.state.direccion}</li>
                    <li><label>Latitud:{this.state.latitud}</label></li>
                    <li><label>Longitud:{this.state.longitud}</label></li>
                </ul>
            </div> 
        )
    }

    updateAdress(event){
        this.setState({
            address: event.target.value
        });
    }

    getAddressGeo(e){

        e.preventDefault();
        const apiUrl = this.state.api + this.state.address;

        request.post(apiUrl).then((res) => {

            const direccionCompleta = res.body.results[0].formatted_address; 
            const Latitud = res.body.results[0].geometry.location.lat;
            const Longitud = res.body.results[0].geometry.location.lng;             

           this.setState({
                direccion: direccionCompleta,
                latitud: Latitud, 
                longitud: Longitud
            })

        })
        .catch((err) => {
            console.log(err.message);
        });

        getSolarDayInformation();

    } 
}

export default AddressInput;

tableInformacion.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import request from 'superagent';

class TableConsumeInformation extends Component{

    constructor(){
        super();
        this.state = {
            apiSolarInformation: 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=',
            parameters:'execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&',
            startDate:'0101&',
            endDate:'1231&',
            comunity: 'userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&',
            latitudePlace:'lat=',
            longitudePlace:'&lon=',
            anonymous:'&user=anonymous'
        };
    }

    render(){
        return(
            <div>
                <h2>Information Energy</h2>
                <table></table>
            </div>
        );
    }

    getSolarDayInformation(){
        apiSolarUrl = 'https://asdc-arcgis.larc.nasa.gov/cgi-bin/power/v1beta/DataAccess.py?request=execute&identifier=SinglePoint&parameters=ALLSKY_SFC_SW_DWN&startDate=20170101&endDate=20171231&userCommunity=SSE&tempAverage=DAILY&outputList=JSON,ASCII&lat=11.373&lon=-72.253&user=anonymous';
        request.get(apiSolarUrl).then((req, res) => {
            console.log(res.body);
        });
    }

}

export default TableConsumeInformation;

What I understand from your question you want to pass some data from tableInformacion.js to address.js. you can do this using props follow this link facebook.github.io/react-native/docs/props.html — Rajmani Arya
– Rajmani Arya, Commented Apr 2, 2018 at 15:28
No, just execute the function/method getSolarDayInformation(), let me edit the question — Pedro Miguel Pimienta Morales
– Pedro Miguel Pimienta Morales, Commented Apr 2, 2018 at 15:39

Deadron · Accepted Answer · 2018-04-02 15:31:02Z

1

I assume you are talking about the getSolarDayInformation function in this case.

In your case here, it looks like the easiest thing to do would be to refactor your function into its own file and import it into all the places its needed. There is no reason for it to be a object method as it has no dependency on the object state.

answered Apr 2, 2018 at 15:31

Deadron

5,2891 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pedro Miguel Pimienta Morales Over a year ago

that is, create a js file that contains that function only, and then make the call?

Pedro Miguel Pimienta Morales Over a year ago

Thanks for your help.

Damian Peralta · Accepted Answer · 2018-04-02 16:31:46Z

1

You could create a helper functions file, something like

helper.js

export const getSolarDayInformation = () => {
    ...
}

Then, import the method in your other file(s)

import {getSolarDayInformation} from 'path/to/your/file';

answered Apr 2, 2018 at 16:31

Damian Peralta

1,8969 silver badges12 bronze badges

7 Comments

Pedro Miguel Pimienta Morales Over a year ago

Thanks for your answer, excuse me, you have time in this moment for some questions?

Damian Peralta Over a year ago

Not too much, but I have about 20 min

Pedro Miguel Pimienta Morales Over a year ago

for example, i do this question, communication between components, but the answer is not i want it, i want to export some value, for example, the chid 2 to parent, and this value, send to child 3

Damian Peralta Over a year ago

You can have a parent component, and declare the methods on the parent. Then, from the childs, you can call the functions in the parent, using callback functions, update the state, and then pass new updated data to the childs. You should look into React docs for props and state: reactjs.org/docs/components-and-props.html reactjs.org/docs/state-and-lifecycle.html

Pedro Miguel Pimienta Morales Over a year ago

Thanks again, i'm not speak english, but i learning, i'm seeing that its necesary

|

Collectives™ on Stack Overflow

How to call/execute method/function from another component react

address.js

tableInformacion.js

2 Answers 2

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

address.js

tableInformacion.js

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related