get value data into state in react native, how do i get this to work












0















I'm learning React Native and I'm trying to build a simple "questions and answers" form. I have set a value to some text, and when onPress is fired, it should get its value to the state:



import React, { Component } from 'react';
import { View, Text } from 'react-native';

class quest extends Component {
state = {
question1: ans1, //where ans1 is the value onPressed
question2: ans1, //where ans3 is the value onPressed
longitude: 0.3256, //geolocation
latitude: -0.3589,//geolocation
}

onSubmit = () => (
console.log(this.state)
)
render() {
return (
<View>
<text> What kind of ball is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='basketball'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='football'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='handball'</text>
<TouchableHighlight />
<text> What kind of vehicle is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='bike'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='bus'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='train'</text>
<TouchableHighlight />
<button title='Submit' onPress={onSubmit} />
</View>
)
}
}









share|improve this question




















  • 1





    Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

    – c-chavez
    Nov 21 '18 at 12:11











  • Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

    – c-chavez
    Nov 21 '18 at 12:12











  • Thank you for help and recommending on the official docs of React. It really helped a lot.

    – Michael ofori atta
    Nov 21 '18 at 20:17
















0















I'm learning React Native and I'm trying to build a simple "questions and answers" form. I have set a value to some text, and when onPress is fired, it should get its value to the state:



import React, { Component } from 'react';
import { View, Text } from 'react-native';

class quest extends Component {
state = {
question1: ans1, //where ans1 is the value onPressed
question2: ans1, //where ans3 is the value onPressed
longitude: 0.3256, //geolocation
latitude: -0.3589,//geolocation
}

onSubmit = () => (
console.log(this.state)
)
render() {
return (
<View>
<text> What kind of ball is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='basketball'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='football'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='handball'</text>
<TouchableHighlight />
<text> What kind of vehicle is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='bike'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='bus'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='train'</text>
<TouchableHighlight />
<button title='Submit' onPress={onSubmit} />
</View>
)
}
}









share|improve this question




















  • 1





    Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

    – c-chavez
    Nov 21 '18 at 12:11











  • Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

    – c-chavez
    Nov 21 '18 at 12:12











  • Thank you for help and recommending on the official docs of React. It really helped a lot.

    – Michael ofori atta
    Nov 21 '18 at 20:17














0












0








0








I'm learning React Native and I'm trying to build a simple "questions and answers" form. I have set a value to some text, and when onPress is fired, it should get its value to the state:



import React, { Component } from 'react';
import { View, Text } from 'react-native';

class quest extends Component {
state = {
question1: ans1, //where ans1 is the value onPressed
question2: ans1, //where ans3 is the value onPressed
longitude: 0.3256, //geolocation
latitude: -0.3589,//geolocation
}

onSubmit = () => (
console.log(this.state)
)
render() {
return (
<View>
<text> What kind of ball is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='basketball'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='football'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='handball'</text>
<TouchableHighlight />
<text> What kind of vehicle is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='bike'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='bus'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='train'</text>
<TouchableHighlight />
<button title='Submit' onPress={onSubmit} />
</View>
)
}
}









share|improve this question
















I'm learning React Native and I'm trying to build a simple "questions and answers" form. I have set a value to some text, and when onPress is fired, it should get its value to the state:



import React, { Component } from 'react';
import { View, Text } from 'react-native';

class quest extends Component {
state = {
question1: ans1, //where ans1 is the value onPressed
question2: ans1, //where ans3 is the value onPressed
longitude: 0.3256, //geolocation
latitude: -0.3589,//geolocation
}

onSubmit = () => (
console.log(this.state)
)
render() {
return (
<View>
<text> What kind of ball is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='basketball'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='football'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='handball'</text>
<TouchableHighlight />
<text> What kind of vehicle is this?</text>
<TouchableHighlight onPress={//get this value}>
<text> ans1 value='bike'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans2 value='bus'</text>
<TouchableHighlight />
<TouchableHighlight onPress={//get this value}>
<text> ans3 value='train'</text>
<TouchableHighlight />
<button title='Submit' onPress={onSubmit} />
</View>
)
}
}






react-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 '18 at 13:25









c-chavez

2,24121733




2,24121733










asked Nov 21 '18 at 12:00









Michael ofori attaMichael ofori atta

32




32








  • 1





    Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

    – c-chavez
    Nov 21 '18 at 12:11











  • Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

    – c-chavez
    Nov 21 '18 at 12:12











  • Thank you for help and recommending on the official docs of React. It really helped a lot.

    – Michael ofori atta
    Nov 21 '18 at 20:17














  • 1





    Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

    – c-chavez
    Nov 21 '18 at 12:11











  • Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

    – c-chavez
    Nov 21 '18 at 12:12











  • Thank you for help and recommending on the official docs of React. It really helped a lot.

    – Michael ofori atta
    Nov 21 '18 at 20:17








1




1





Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

– c-chavez
Nov 21 '18 at 12:11





Before you continue learning React Native, have a look at the official docs of React. This scenario can be solved following this part of the docs: Handling Events

– c-chavez
Nov 21 '18 at 12:11













Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

– c-chavez
Nov 21 '18 at 12:12





Also, as you will see in the docs, you will see that you should set the initial state in the constructor. Have a look here.

– c-chavez
Nov 21 '18 at 12:12













Thank you for help and recommending on the official docs of React. It really helped a lot.

– Michael ofori atta
Nov 21 '18 at 20:17





Thank you for help and recommending on the official docs of React. It really helped a lot.

– Michael ofori atta
Nov 21 '18 at 20:17












2 Answers
2






active

oldest

votes


















1














Try this:



constructor(props) {
super(props)

this.state = {
question1: '',
question2: '',
}
}

render() {
return (
<View style={styles.container}>

<Text style={styles.answers}> What kind of ball is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question1: 'Basketball' })}>
<Text> Basketball</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Football' })}>
<Text> Football</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Volleyball' })}>
<Text style={styles.answers}> Volleyball</Text>
</TouchableHighlight>

<Text style={styles.answers}> What kind of vehicle is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question2: 'Bike' })}>
<Text> Bike</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Bus' })}>
<Text> Bus</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Train' })}>
<Text style={styles.answers}> Train</Text>
</TouchableHighlight>

<Button
title='Submit'
onPress={() => console.log(this.state)}
/>

</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 50,
marginLeft: 20
},
answers: {
marginBottom: 15,
},
})





share|improve this answer
























  • I appreciate the help.Thank you

    – Michael ofori atta
    Nov 21 '18 at 20:19











  • @Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

    – kivul
    Nov 23 '18 at 16:35



















1














I’m having trouble understanding your question. I think you’re asking how to save value of the text into state. If yes, then this would work



<TouchableHighlight onPress={() => this.setState({question1: 'bike',})}>
<text> ans1 value='bike'</text>
<TouchableHighlight/>





share|improve this answer
























  • This is my first time asking question here, i will do better next time.Thanks anyway :)

    – Michael ofori atta
    Nov 21 '18 at 20:21











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411594%2fget-value-data-into-state-in-react-native-how-do-i-get-this-to-work%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














Try this:



constructor(props) {
super(props)

this.state = {
question1: '',
question2: '',
}
}

render() {
return (
<View style={styles.container}>

<Text style={styles.answers}> What kind of ball is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question1: 'Basketball' })}>
<Text> Basketball</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Football' })}>
<Text> Football</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Volleyball' })}>
<Text style={styles.answers}> Volleyball</Text>
</TouchableHighlight>

<Text style={styles.answers}> What kind of vehicle is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question2: 'Bike' })}>
<Text> Bike</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Bus' })}>
<Text> Bus</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Train' })}>
<Text style={styles.answers}> Train</Text>
</TouchableHighlight>

<Button
title='Submit'
onPress={() => console.log(this.state)}
/>

</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 50,
marginLeft: 20
},
answers: {
marginBottom: 15,
},
})





share|improve this answer
























  • I appreciate the help.Thank you

    – Michael ofori atta
    Nov 21 '18 at 20:19











  • @Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

    – kivul
    Nov 23 '18 at 16:35
















1














Try this:



constructor(props) {
super(props)

this.state = {
question1: '',
question2: '',
}
}

render() {
return (
<View style={styles.container}>

<Text style={styles.answers}> What kind of ball is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question1: 'Basketball' })}>
<Text> Basketball</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Football' })}>
<Text> Football</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Volleyball' })}>
<Text style={styles.answers}> Volleyball</Text>
</TouchableHighlight>

<Text style={styles.answers}> What kind of vehicle is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question2: 'Bike' })}>
<Text> Bike</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Bus' })}>
<Text> Bus</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Train' })}>
<Text style={styles.answers}> Train</Text>
</TouchableHighlight>

<Button
title='Submit'
onPress={() => console.log(this.state)}
/>

</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 50,
marginLeft: 20
},
answers: {
marginBottom: 15,
},
})





share|improve this answer
























  • I appreciate the help.Thank you

    – Michael ofori atta
    Nov 21 '18 at 20:19











  • @Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

    – kivul
    Nov 23 '18 at 16:35














1












1








1







Try this:



constructor(props) {
super(props)

this.state = {
question1: '',
question2: '',
}
}

render() {
return (
<View style={styles.container}>

<Text style={styles.answers}> What kind of ball is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question1: 'Basketball' })}>
<Text> Basketball</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Football' })}>
<Text> Football</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Volleyball' })}>
<Text style={styles.answers}> Volleyball</Text>
</TouchableHighlight>

<Text style={styles.answers}> What kind of vehicle is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question2: 'Bike' })}>
<Text> Bike</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Bus' })}>
<Text> Bus</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Train' })}>
<Text style={styles.answers}> Train</Text>
</TouchableHighlight>

<Button
title='Submit'
onPress={() => console.log(this.state)}
/>

</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 50,
marginLeft: 20
},
answers: {
marginBottom: 15,
},
})





share|improve this answer













Try this:



constructor(props) {
super(props)

this.state = {
question1: '',
question2: '',
}
}

render() {
return (
<View style={styles.container}>

<Text style={styles.answers}> What kind of ball is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question1: 'Basketball' })}>
<Text> Basketball</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Football' })}>
<Text> Football</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question1: 'Volleyball' })}>
<Text style={styles.answers}> Volleyball</Text>
</TouchableHighlight>

<Text style={styles.answers}> What kind of vehicle is this? </Text>

<TouchableHighlight onPress={() => this.setState({ question2: 'Bike' })}>
<Text> Bike</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Bus' })}>
<Text> Bus</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.setState({ question2: 'Train' })}>
<Text style={styles.answers}> Train</Text>
</TouchableHighlight>

<Button
title='Submit'
onPress={() => console.log(this.state)}
/>

</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 50,
marginLeft: 20
},
answers: {
marginBottom: 15,
},
})






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 '18 at 12:53









kivulkivul

543217




543217













  • I appreciate the help.Thank you

    – Michael ofori atta
    Nov 21 '18 at 20:19











  • @Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

    – kivul
    Nov 23 '18 at 16:35



















  • I appreciate the help.Thank you

    – Michael ofori atta
    Nov 21 '18 at 20:19











  • @Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

    – kivul
    Nov 23 '18 at 16:35

















I appreciate the help.Thank you

– Michael ofori atta
Nov 21 '18 at 20:19





I appreciate the help.Thank you

– Michael ofori atta
Nov 21 '18 at 20:19













@Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

– kivul
Nov 23 '18 at 16:35





@Michaeloforiatta if this solved your issue, maybe mark as an answer, that would be much appreciated

– kivul
Nov 23 '18 at 16:35













1














I’m having trouble understanding your question. I think you’re asking how to save value of the text into state. If yes, then this would work



<TouchableHighlight onPress={() => this.setState({question1: 'bike',})}>
<text> ans1 value='bike'</text>
<TouchableHighlight/>





share|improve this answer
























  • This is my first time asking question here, i will do better next time.Thanks anyway :)

    – Michael ofori atta
    Nov 21 '18 at 20:21
















1














I’m having trouble understanding your question. I think you’re asking how to save value of the text into state. If yes, then this would work



<TouchableHighlight onPress={() => this.setState({question1: 'bike',})}>
<text> ans1 value='bike'</text>
<TouchableHighlight/>





share|improve this answer
























  • This is my first time asking question here, i will do better next time.Thanks anyway :)

    – Michael ofori atta
    Nov 21 '18 at 20:21














1












1








1







I’m having trouble understanding your question. I think you’re asking how to save value of the text into state. If yes, then this would work



<TouchableHighlight onPress={() => this.setState({question1: 'bike',})}>
<text> ans1 value='bike'</text>
<TouchableHighlight/>





share|improve this answer













I’m having trouble understanding your question. I think you’re asking how to save value of the text into state. If yes, then this would work



<TouchableHighlight onPress={() => this.setState({question1: 'bike',})}>
<text> ans1 value='bike'</text>
<TouchableHighlight/>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 '18 at 12:30









Manju BashaManju Basha

312419




312419













  • This is my first time asking question here, i will do better next time.Thanks anyway :)

    – Michael ofori atta
    Nov 21 '18 at 20:21



















  • This is my first time asking question here, i will do better next time.Thanks anyway :)

    – Michael ofori atta
    Nov 21 '18 at 20:21

















This is my first time asking question here, i will do better next time.Thanks anyway :)

– Michael ofori atta
Nov 21 '18 at 20:21





This is my first time asking question here, i will do better next time.Thanks anyway :)

– Michael ofori atta
Nov 21 '18 at 20:21


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411594%2fget-value-data-into-state-in-react-native-how-do-i-get-this-to-work%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

How to fix TextFormField cause rebuild widget in Flutter

Npm cannot find a required file even through it is in the searched directory