Benjamin Smith Max Benjamin Smith Max - 3 months ago 89
Javascript Question

Insert the pressed item into an array in react-native

I have a list of tag objects in array (tagList), which I am fetching from the server and storing into the state. After a succesfull fetch I am mapping each item inside a

ScrollView
.

export default class RegisterTags extends Component {
constructor(props) {
super(props)
this.state = {
tagList: [],
selectedTags: [],
}
}

componentWillMount() {
api.getTagsOnRegister()
.then((res) => {
this.setState({
tagList: res
})
})
}

insertTag = (tag) =>{
this.setState({
selectedTags: this.state.selectedTags.push(tag)
})
}


render() {
return(
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.ScrollViewContainer}>
{this.state.tagList.map((tag) => {
return(
<View style={styles.tagStyle} key={tag.id} onPress={this.insertTag(tag)}>
<Text style={styles.tagText}>{tag.name}</Text>
</View>
)
})}
</ScrollView>
</View>
)
}
}


What I want to achieve is, when I press on any of the tag, I would like to add that object into the selectedTags array. But I am getting error:


Warning: setState(...): Cannot update during an existing state transition (such as within
render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to
componentWillMount
.

Possible Unhandled Promise Rejection (id: 0):
_this.state.selectedTags.push is not a function
TypeError: _this.state.selectedTags.push is not a function


How can I add the pressed tag item into the selectedTags array?

Answer
onPress={this.insertTag(tag)}

Issue: in your render function you are directly calling a function that changes state. Render function should never call any function that updates state.

So how to call onPress?

Ans: as written below

onPress => {() => {this.insertTag(tag) }}

Will code work now? Answer is no.

You have to put your views inside TouchableHighlight and move onPress method from View to TouchableHighlight. Then hopefully your code works. I am assuming everything is setup propery.

Comments