Passing value of component to another Scene to use in post method - react native - react-native

Question

I need Some Help as possible.
In my code I have scene that return into my view, an array with names. However, I want to do something also. When I click the name, I want to take the email of the name I have clicked and past to my post method, to return in another scene with information of the email person. Here is my code:
My Users Class with all elements
import React from 'react';
import ListaItens from './ListaUsers'
import BarraNavegacao from './BarraNavegacao';
import {View,Image,Alert,TouchableHighlight,AsyncStorage} from 'react-native';
import axios from 'axios';
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {tituloBarraNav: 'Colaboradores',testLocal:''};
}
My refresh function is into Component Users
async refresh() {
let tmp_localData = {};
AsyncStorage.getItem('localData', (err, result) => {
//console.log(result);
tmp_localData = JSON.parse(result);
//console.log('Local temp: ', tmp_localData.User.email);
}).then((result) => {
tmp_localData = JSON.parse(result);
//console.log('Email: ', tmp_localData.email);
axios({
method: 'post',
url: 'my url'
data: {
email: 'someEmail#test.com,
}
},
console.log('aqui esta o email'),
).then((response) => {
//console.log('Get tmpLocal ----------',tmp_localData);
//console.log('Get response ----------',response);
tmp_localData.User = {
"userID": response.data.response.userID,
"displayName": response.data.response.displayName,
"email": response.data.response.email,
"avatar": response.data.response.avatar,
"gender": response.data.response.gender,
"Session": {
"token": response.data.response.token,
},
"FootID": response.data.response.FootID,
};
//this.refresh();
//console.log('Set tmpLocal',tmp_localData);
AsyncStorage.setItem('localData', JSON.stringify(tmp_localData), () => {
}).then((result) => {
this.props.navigator.push({id: 'MenuPrincipal'});
console.log('Navigator',this.props.navigator);
//Alert.alert('Clicou Aqui ');
});
}).catch((error) => {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
Alert.alert('Não foi possivel mudar o utilizador');
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log('erro de ligaçao', error.message);
Alert.alert('Não foi possivel mudar o utilizador');
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('erro de codigo no then', error.message);
Alert.alert('Não foi possivel mudar o utilizador');
}
console.log(error.config);
Alert.alert('Não foi possivel mudar o utilizador');
});
});
}
My render in Users
render(){
const {principal, conteudo,imgConteudo1,imgConteudo2, texto,box}= myStyle;
return(
<View style={principal}>
<BarraNavegacao back navigator={this.props.navigator} tituloProp={this.state.tituloBarraNav}/>
<TouchableHighlight onPress={() => {this.refresh();}}
clearButtonMode={'while-editing'}
activeOpacity={1} underlayColor={'white'}>
<ListaItens/>
</TouchableHighlight>
</View>
);
}
}
I have ListaItems Component that will walk through an array and will put inside ScroolView with map method. So the code is:
My ListaItems Class
import React from 'react';
import { ScrollView} from 'react-native';
import axios from 'axios';
import Items from './Items';
export default class ListaItens extends React.Component {
constructor(props) {
super(props);
this.state = {listaItens: [], listaEmail: [] };
}
componentWillMount() {
//request http
axios.get('my url')
.then((response) => {
this.setState({listaItens: response.data.response})
})
.catch(() => {
console.log('Erro ao imprimir os dados')
});
}
render() {
return (
<ScrollView>
{this.state.listaItens.map(item =>(<Items key={item.email} item={item}/>))}
</ScrollView>
);
}
}
The last component is the component the build what i want to show inside scrollview in ListaItems. The component name is Items. the code is:
My Items Class
import React, {Component} from 'react';
import {Text, Alert, View, Image,} from 'react-native';
export default class Items extends Component {
constructor(props) {
super(props);
this.state = {listaEmail: ''};
}
render() {
const {foto, conteudo, texto, box, test} = estilo;
return (
<View>
<Text/>
<Text/>
<View style={conteudo}>
<Image style={foto} source={{uri: this.props.item.avatar}}/>
<Text style={texto}>{this.props.item.displayName}</Text>
</View>
<View style={test}>
<Text style={texto}>{this.props.item.email}</Text>
</View>
</View>
);
}
}
So, in Users Class for refresh() function in the post method on this email: "someEmail#test.com", I want to be dynamic, when I click the name of a person in Items Class, I want to take the the email here on this.props.item.email and put in parameter on post method of Users Class----refresh()----axios()---Data---email:the email i want to past.
A litle help here, please. I am desperate right now because i have tryied and I did not make it

Answer 1

First move the Touchable to the item
export default class Items extends Component {
render() {
const { foto, conteudo, texto, box, test } = estilo;
return (
<View> //I'm not sure if the this.props.item.email is the one you use, just change it if you need.
<TouchableHighlight onPress={() => { this.props.callback(this.props.item.email); }}
clearButtonMode={'while-editing'}
activeOpacity={1} underlayColor={'white'}>
<Text />
<Text />
<View style={conteudo}>
<Image style={foto} source={{ uri: this.props.item.avatar }} />
<Text style={texto}>{this.props.item.displayName}</Text>
<View style={test}>
<Text>{this.props.item.email}</Text>
</View>
</View>
</TouchableHighlight>
</View>
);
}
}
Them change you function to receive the email param.
refresh = (email) => {
let tmp_localData = {};
AsyncStorage.getItem('localData', (err, result) => {
tmp_localData = result;
}).then((result) => {
axios({
method: 'post',
url: 'my Url',
data: {
email: email,
}
})
})
}
And them you can pass the function to component via props
render() {
const { principal, conteudo, imgConteudo1, imgConteudo2, texto, box } =
myStyle;
return (
<View style={principal} >
<BarraNavegacao back navigator={this.props.navigator} tituloProp={this.state.tituloBarraNav} />
<ListaItens callback={this.refresh} />
</View>
);
}