How to access value of a state between different classes in React / Pubsub

0

I'm having trouble getting a value from a specific state of another class, I do not know if this is the best way to get what I want.

At first I have a class with form that will do an Ajax search and return the result, I used a PubSub JS to receive the value in the Parent class to be able to render it in another class, however, I need a state value to give continuity since I need another ajax request using data from the first result.

export default class LiveMatchBox extends Component {

constructor() {
    super();
    this.state = {summonerDetails: [], sName: '', sServer: '', formRes: ''};
}

componentDidMount(){
    PubSub.subscribe(
        'summoner-details-update',
        function(topic, res){
            this.setState({summonerDetails: res});
            this.setState({formRes: true});     

            //Aqui eu obtenho a resposta da primeira requisição Ajax feita no FORM
            //Aqui preciso startar outra requisição Ajax com base nos dados conseguidos na primeira e no Form
        }.bind(this)
    );
}

render(){
    return (
        <div>
            <SearchMatchForm />
            <SummonerDetails summonerDetails={this.state.summonerDetails} formRes={this.state.formRes}/>
        </div>
    );
}}

class SearchMatchForm extends Component {
constructor(){
    super();
    this.state = {matchDetails: [], summonerDetails: [], sName: '', sServer: ''};

    this.sName = this.setName.bind(this);
    this.sServer = this.setServer.bind(this);
}

setName(e){ 
    this.setState({sName: e.target.value});
}

setServer(e){
    this.setState({sServer: e.target.value});
}

sendForm(e){
    e.preventDefault();

    Axios.get('')
        .then(res => {
            PubSub.publish('summoner-details-update', res.data);
            this.setState({summonerDetails: res.data}); 
            //Aqui envio o valor da resposta Ajax pro subscribe, porém quero enviar tb o valor do state sServer
            //Como envio o valor de sServer também?
        });
}

render(){       
    const serverList = [
        {region: "br", platform: "br1"}, 
        {region: "eune", platform: "eun1"}, 
        {region: "euw", platform: "euw1"}, 
        {region: "jp", platform: "jp1"}, 
        {region: "kr", platform: "kr"}, 
        {region: "lan", platform: "la1"}, 
        {region: "las", platform: "la2"}, 
        {region: "na", platform: "na1"}, 
        {region: "oce", platform: "oc1"}, 
        {region: "tr", platform: "tr1"}, 
        {region: "ru", platform: "ru"}
    ];

    const serverListRegion = serverList.map((server) => 
        <ToggleButton key={server.platform} value={server.platform} bsStyle="primary" bsSize="small" onChange={this.setServer.bind(this)} >{server.region.toUpperCase()}</ToggleButton>);

    return(
        <Well>
            <Form inline align="center" onSubmit={this.sendForm.bind(this)} >
                <FormGroup>
                    <ButtonToolbar >
                        <ToggleButtonGroup type="radio" name="sServer" >
                            {serverListRegion}
                        </ToggleButtonGroup>
                    </ButtonToolbar><br/>
                    <FormControl type="text" placeholder="Enter Summoner Name" name="sName" id="sName" onChange={this.setName.bind(this)} />{' '}
                    <Button type="submit" bsStyle="success">Get Vision</Button>
                </FormGroup>
            </Form>
        </Well>
    );      
}}

I need access to the state sServer of the SearchMatchForm class, I do not know where I go or how I get the value, could anyone help me?

Thank you

    
asked by anonymous 10.05.2018 / 15:00

0 answers