React-Native how give a method an variable
I'm trying to change a variable in state so I give it to a component as property later on, but i can't seem to change the variable.
constructor(){
super();
this.state = {
dataSource: ,
reading: false,
iName: 'default'
};
this.startRead = this.startRead.bind(this);
}
startRead = ({item}) => {
this.setState({
reading: true,
iName: {item.name} //it doesn't work over here
});
}
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={this.startRead}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
I called this renderItem function via a FlatList
this.state.reading ?
<ReadScreen iname={this.state.iName}/>
:
<View style={styles.slide}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
It gives me an error of
"SyntaxError: App.js: Unexpected token, expected ',' (21,24)"
(21,24) gives the line
iName: {item.name}
What am I doing wrong?
The goal is; when I press a Item of the FlatList, a.k.a. the TouchableOpacity, it renders the ReadScreen that shows, more given information through properties instead of the FlatList.
If it's unclear or need more information, just ask
Thank you for your time.
react-native
asked Nov 13 '18 at 19:47
NoahSNoahS
133
add a comment |
I'm trying to change a variable in state so I give it to a component as property later on, but i can't seem to change the variable.
constructor(){
super();
this.state = {
dataSource: ,
reading: false,
iName: 'default'
};
this.startRead = this.startRead.bind(this);
}
startRead = ({item}) => {
this.setState({
reading: true,
iName: {item.name} //it doesn't work over here
});
}
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={this.startRead}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
I called this renderItem function via a FlatList
this.state.reading ?
<ReadScreen iname={this.state.iName}/>
:
<View style={styles.slide}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
It gives me an error of
"SyntaxError: App.js: Unexpected token, expected ',' (21,24)"
(21,24) gives the line
iName: {item.name}
What am I doing wrong?
The goal is; when I press a Item of the FlatList, a.k.a. the TouchableOpacity, it renders the ReadScreen that shows, more given information through properties instead of the FlatList.
If it's unclear or need more information, just ask
Thank you for your time.
react-native
asked Nov 13 '18 at 19:47
NoahSNoahS
133
add a comment |
I'm trying to change a variable in state so I give it to a component as property later on, but i can't seem to change the variable.
constructor(){
super();
this.state = {
dataSource: ,
reading: false,
iName: 'default'
};
this.startRead = this.startRead.bind(this);
}
startRead = ({item}) => {
this.setState({
reading: true,
iName: {item.name} //it doesn't work over here
});
}
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={this.startRead}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
I called this renderItem function via a FlatList
this.state.reading ?
<ReadScreen iname={this.state.iName}/>
:
<View style={styles.slide}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
It gives me an error of
"SyntaxError: App.js: Unexpected token, expected ',' (21,24)"
(21,24) gives the line
iName: {item.name}
What am I doing wrong?
The goal is; when I press a Item of the FlatList, a.k.a. the TouchableOpacity, it renders the ReadScreen that shows, more given information through properties instead of the FlatList.
If it's unclear or need more information, just ask
Thank you for your time.
react-native
asked Nov 13 '18 at 19:47
NoahSNoahS
133
I'm trying to change a variable in state so I give it to a component as property later on, but i can't seem to change the variable.
constructor(){
super();
this.state = {
dataSource: ,
reading: false,
iName: 'default'
};
this.startRead = this.startRead.bind(this);
}
startRead = ({item}) => {
this.setState({
reading: true,
iName: {item.name} //it doesn't work over here
});
}
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={this.startRead}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
I called this renderItem function via a FlatList
this.state.reading ?
<ReadScreen iname={this.state.iName}/>
:
<View style={styles.slide}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
It gives me an error of
"SyntaxError: App.js: Unexpected token, expected ',' (21,24)"
(21,24) gives the line
iName: {item.name}
What am I doing wrong?
The goal is; when I press a Item of the FlatList, a.k.a. the TouchableOpacity, it renders the ReadScreen that shows, more given information through properties instead of the FlatList.
If it's unclear or need more information, just ask
Thank you for your time.
react-native
react-native
asked Nov 13 '18 at 19:47
NoahSNoahS
133
asked Nov 13 '18 at 19:47
NoahSNoahS
133
asked Nov 13 '18 at 19:47
NoahSNoahS
133
asked Nov 13 '18 at 19:47
NoahSNoahS
133
asked Nov 13 '18 at 19:47
NoahSNoahS
133
133
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Replace this line
onPress={this.startRead}
With this line
onPress={() => this.startRead({item})}
Here's the full solution
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startRead({item})}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
add a comment |
Use iName: item.name instead of iName:{item.name}
answered Nov 13 '18 at 19:51
JuustJuust
407
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288456%2freact-native-how-give-a-method-an-variable%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
Replace this line
onPress={this.startRead}
With this line
onPress={() => this.startRead({item})}
Here's the full solution
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startRead({item})}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
add a comment |
Replace this line
onPress={this.startRead}
With this line
onPress={() => this.startRead({item})}
Here's the full solution
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startRead({item})}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
add a comment |
Replace this line
onPress={this.startRead}
With this line
onPress={() => this.startRead({item})}
Here's the full solution
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startRead({item})}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
Replace this line
onPress={this.startRead}
With this line
onPress={() => this.startRead({item})}
Here's the full solution
renderItem = ({item}) => {
this.setName
return(
<TouchableOpacity style={{flex: 1, flexDirection: 'row', marginBottom: 5}} onPress={() => this.startRead({item})}>
<Text>{item.name}</Text> // this does work
<Text>{item.desc}</Text>
</TouchableOpacity>
);
}
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
answered Nov 13 '18 at 19:51
Tareq El-MasriTareq El-Masri
808314
808314
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
add a comment |
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
thank you, I'm new to this and I couldn't find the answer nor describe this problem very well
– NoahS
Nov 13 '18 at 20:01
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
You need to pass the object to the method, not doing that you will pass the event from onPress
– Tareq El-Masri
Nov 13 '18 at 20:50
add a comment |
Use iName: item.name instead of iName:{item.name}
answered Nov 13 '18 at 19:51
JuustJuust
407
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
add a comment |
Use iName: item.name instead of iName:{item.name}
answered Nov 13 '18 at 19:51
JuustJuust
407
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
add a comment |
Use iName: item.name instead of iName:{item.name}
answered Nov 13 '18 at 19:51
JuustJuust
407
Use iName: item.name instead of iName:{item.name}
answered Nov 13 '18 at 19:51
JuustJuust
407
answered Nov 13 '18 at 19:51
JuustJuust
407
answered Nov 13 '18 at 19:51
JuustJuust
407
answered Nov 13 '18 at 19:51
JuustJuust
407
407
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
add a comment |
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
When i use "iName: item.name" it gives an error of "undefined is not an object (evaluating 'item.name')
– NoahS
Nov 13 '18 at 19:56
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288456%2freact-native-how-give-a-method-an-variable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
