I'm trying to pass down to a modal a object via a prop when a user clicks to open. I'm receiving the value from the clicked row but my modal can't read the value from this.props
and I'm getting an undefined. I am setting the state value correctly and passing it to the modal component.
Modal Call
<Modal toggleModal={this.toggleModal} show={this.state.isOpen}
onClose={this.toggleModal} user={this.state.user} />
Setting the state value
toggleModal = (user) => {
var userData = {};
if (user !== null) {
userData = user
}
this.setState({
isOpen: !this.state.isOpen,
user: userData
},()=>{
console.log('User data changed');
})
}
Inside the render part of the modal component
if (this.props.user === null) {
userFound = 'Not found'
}
console.log(this.props.user);
When inside the modal component I get undefined. Everywhere before that I get the user object.
Thanks
Inside your component you are just checking for null and not undefined
, if you want to check for undefined one of the ways is to make use of typeof
typeof user !== "undefined"
so it will be like (You can ammend it accordingly if you want to check for both or one ):
toggleModal = (user) => {
var userData = {};
if (typeof user !== "undefined" && user !== null) {
userData = user
}
And you can move this.setState
inside if block
toggleModal = (user) => {
if (typeof user !== "undefined" && user !== null) {
this.setState({
isOpen: !this.state.isOpen,
user: user
})
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.