I'm lost as to how to send through multiple input of data through to the next scene in my app. I have no problem with sending through one input of data "text1".
This is my sample code below.
import { Actions } from 'react-native-router-flux';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text1: '',
text2: '',
};
}
render() {
return (
<View>
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={text1 => this.setState({ text1 })}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={text2 => this.setState({ text2 })}
/>
</View>
<TouchableOpacity
style={styles.btnNext}
onPress={this.onPressNext.bind(this)}>
<Text style={styles.btnText}>Next</Text>
</TouchableOpacity>
);
}
Below is where i think needs fixing because the + sign isn't allowing to pass two states?
onPressNext() {
Actions.scene2({text1: this.state.text1} +
{text2: this.state.text2});
}
}
Instead of trying to pass 2 different objects, just pass it like:
Actions.scene2({text1: this.state.text1,
text2: this.state.text2})
Related
I'm trying to get the text from two text fields I have.
But when I try to log the text to the console it always prints nothing, It has the LOG tag of course, but nothing else.
This is my code:
class Login extends React.Component {
state = {
email : '',
password: '',
}
handleLogin = () => {
console.log(this.state.email);
};
render() {
return(
<View style={styles.superContainer}>
<View style={styles.formContainer}>
<AppTextInput
placeHolderText="Email#Address.com"
onChangeText={(text) => this.setState({email: text})}/>
<AppTextInput
placeHolderText="Password"
onChangeText={(text) => this.setState({password: text})}/>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
onPress={this.handleLogin}
/>
</View>
</View>
);
}
}
I searched for an answer, but it seems like it should work. It is written just like in other answers I saw to the same question, and it is written like that on the docs I saw.
What am I doing wrong?
As request, I added an image of the console:
EDIT: I now tried to change the 'email' in the this.state part, when logging it is showing, it seems like the TextInput won't get the text on onChangeText
Try this:
import {TextInput} from 'react-native';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
}
handleLogin = () => {
console.log(this.state.email);
};
render() {
return(
<View style={styles.superContainer}>
<View style={styles.formContainer}>
<TextInput
placeHolderText="Email#Address.com"
onChangeText={(email) => this.setState({email})}/>
<TextInput
placeHolderText="Password"
onChangeText={(password) => this.setState({password})}/>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="LOGIN"
onPress={this.handleLogin}
/>
</View>
</View>
);
}
}
I can verify that the following code is working on Snack, I have slightly modified some elements (nothing major) and used the alert, instead of console.log. You may directly paste it onto snack to view the result.
import {TextInput} from 'react-native';
import React from 'react'
import { Text, View, Button } from 'react-native';
class Login extends React.Component {
state = {
email : '',
password: '',
}
handleLogin = () => {
alert(this.state.password + " " + this.state.email);
};
render() {
return(
<View>
<View>
<TextInput
placeHolderText="Email#Address.com"
onChangeText={(text) => this.setState({email: text})}/>
<TextInput
placeHolderText="Password"
onChangeText={(text) => this.setState({ password: text })}
/>
</View>
<View >
<Button
title="LOGIN"
onPress={this.handleLogin}
/>
</View>
</View>
);
}
}
export default Login;
Finally figured it out, the problem was that I was using a custom TextInput (aka AppTextInput) and didn't pass it the onChangeText.
Adding to AppTextInput onChangeText={this.props.onChangeText} fixed the issue.
This is the full render function of AppTextInput:
render() {
const { isFocused } = this.state;
const {onFocus, onBlur, onChangeText} = this.props;
return (
<TextInput
placeholder= {this.props.placeHolderText}
selectionColor = {COLORS.appOrange}
underlineColorAndroid={
isFocused ? COLORS.appOrange : COLORS.appGray
}
onChangeText={this.props.onChangeText}
onFocus = {this.handleFocus}
onBlur = {this.handleBlur}
style = {styles.textInput}
/>
);
}
I am trying to send the data of the flatlist items when clicked and set to another class.The ontouch is working but I am having the error below in the image. Also how can I send the data of api to the other class and get from another class? I have implemented as follows:
export default class FlatSpeakers extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, data: [],selectedItem: null, }
const { navigate } = this.props.navigation;
}
onPressItem = () => {
navigate('SpeakersClick')
};
componentDidMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(res => {
this.setState({
isLoading: false,
data: res.data,
})
})
}
renderItem({ item }) {
return (
<TouchableOpacity onPress={()=>this.onPressItem(item)} >
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image
style={styles.thumbnailStyle}
source={{ uri: item.image }}
/>
</View>
<View style={styles.headerContentStyle}>
<Text style={styles.headerTextStyle}>{item.title}</Text>
<Text>{item.artist}</Text>
</View>
</CardSection>
</Card>
</TouchableOpacity>
)
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
)
}
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
onPress={this.onPressItem}
/>
</View>
);
}
}
Problem in your code is, that you are calling same method from two sides - on one side you are passing arguments in it on another side you are not passing arguments. If you wan't to have both cases covered you should change you onPressFunction, to accept arguments - in your case item:
onPressItem = (item) => {
navigate('SpeakersClick')
};
try to put this.onPressItem = this.onPressItem.bind(this) on constructor(props)
I have a react-native view like this.
<Parent>
<Header/>
</Parent>
The header is also a view with some text input fields and icons. The Parent is another view created by adding the Header component. So what I want to do is, when I type some text on the text field which is located in the Header view, I want to take that value to the Parent view props. How to do this??? I've tried some answers that showed in StackOverflow. But they didn't give me what I expected.
For someone who wants to see the full code, This is the parent screen.
export default class ParentScreen extends Component {
constructor(props) {
super(props);
this.state = {
objects: null,
indicator: true,
};
}
render(){
<View style={styles.container}>
<HeaderBar />
</View>
}}
And this is the Header screen.
export default class HeaderBar extends Component {
constructor(props) {
super(props);
}
state = {
searchEnabled: false
};
render() {
return (
<View style={styles.navigationBar}>
<View style={styles.titleArea}>
{this.state.searchEnabled === true ? (
<View style={styles.titleArea}>
<Icon
name="arrow-back"
type="Ionicons"
color="black"
onPress={() => this.setState({ searchEnabled: false })}
/>
<TextInput
placeholder="Search"
placeholderTextColor="white"
style={styles.input}
onChangeText={text => this.setState({ filterKey: text })}
/>
</View>
) : (
<View style={styles.titleArea}>
<Image
style={styles.profileImage}
source={require("../../images/user_image_1.jpg")}
/>
</View>
)}
</View>
</View>
);
}
}
Define a function in the parent View, something like:
onChangeText = (text) => {
this.setState({
myUpdatedText: text
})
}
Then, pass it to the child as a prop:
<HeaderBar onChangeText={this.onChangeText} />
So in the child code you can use it like:
<TextInput
placeholder="Search"
placeholderTextColor="white"
style={styles.input}
onChangeText={this.props.onChangeText}
/>
my Code is:
import Note from './Note';
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
noteArray: [],
noteText: '',
}
}
render() {
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)}></Note>
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Yapılacaklar Listesi</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.textInput}
placeholder='Notunuz...'
placeholderTextColor='white'
underlineColorAndroid='transparent'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}>
</TextInput>
</View>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton} >
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);
}
addNote()
{
if (this.state.noteText){
var d=new Date;
this.state.noteArray.push({
'date':d.getFullYear()
+'/'+(d.getMonth()+1)
+'/'+d.getDate()
});
this.setState({ noteArray: this.state.NoteArray })
this.setState({ noteText: '' })
}
}
}
My error is:undefined not an object (evaluating 'this.state.noteArray.map')
how can i solve this?
i started learn react. The error's screen is
Error Screen
it's my first example. :)
You have to make sure your array is existent:
let notes = !!this.state.noteArray && this.state.noteArray.map((val, key)=>{
should do the job.
The !! is a double negation to avoid another typical error.
This way if noteArray doesn´t exist, the second part after the && is not executed. You could go further and add security checks like checking that it actually is an array etc. but with the above line it should work as long as you actually have an array.
I am creating a todo list. For the TextInput I do not want to use a button and the "onPress: () =>" handler to call my function with the users given text. Instead, I would like the user to just be able to hit the return key to call my function. It doesn't seem that react-native has an "onReturnKey" handler. Any suggestions for how I should go about this?
...
class App extends Component {
constructor(props) {
super(props);
this.state = { newTodo: '' };
}
AddNewTodo(text) {
return console.log(text);
}
render() {
return (
<View>
<Header headerText="VANO" />
<Card>
<CardSection style={{ backgroundColor: '#f7f7f7' }}>
<Text style={styles.titleStyle}>
Reminders
</Text>
</CardSection>
<CardSection>
<Input
placeholder="Create Reminder"
returnKeyType='done'
onChangeText={(text) => this.setState(this.newTodo: text)}
onSubmitEditing={() => this.AddNewTodo(this.state.newTodo)}
value={this.state.newTodo}
/>
</CardSection>
...
The TextInput component has a prop for returnKeyType. You can use that in conjunction with onSubmitEditing to run a function when the return key is pressed.
Example:
constructor() {
this.state = { new_todo: '' }
}
render() {
return (
....
<TextInput
returnKeyType={"done"}
onChangeText={(text) => { this.setState(new_todo: text) }}
onSubmitEditing={() => { myFunctionToAddNewTodo(this.state.new_todo) }}
value={this.state.new_todo}/>
...
)
}