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