Passing props to popup in ReactJS

Question

I am new in ReactJS. I am building a web app to display users list and onclick each row there will be a popup to display more information.

Code --

Table component

class Table extends Component
{

    constructor(props){
        super(props);
        this.state = { showPopup: false };
    }

 togglePopup(user) {
    console.log(user)
    axios.get(user.href).then( response =>{
                   .......
    }
    this.setState({
                showPopup: !this.state.showPopup
            });
}

----------------------------------
----------------------------------

{ (this.props.users.length > 0) ? this.props.users.map( (user, index) => {
        return (
             <tr key={ index }>
               <td>{ user.name }</td>
               <td>{ (user.age != null && user.age > 0) ? user.age : '--' }</td>
               <td>{ user.phone }</td>
               <td>{ (user.cmp != null && user.cmp > 0) ? user.temperature : '--' }</td>
               <td><button onClick={this.togglePopup.bind(this,user)}>View</button></td>
             </tr>
          )
       }) : <tr><td colSpan="5">Loading...</td></tr> }

{this.state.showPopup ?
                    <Popup banksDetail = { this.state.banksDetail }
                           user = { this.props.user }
                        text='Click "Close Button" to hide popup'
                        closePopup={this.togglePopup.bind(this)}
                    />
                    : null
                }

Couple of issues are here

1. On togglePopup function user.href is undefined when I close the popup window.

2. Inside Popup component declaration user = this.props.user is undefined

Any help is highly appreciated.

Answer 1

Your togglePopup method is not aware of the user props you are sending to the popup component as it lives outside of it. If you want to pass the user to togglePopup you could do it by returning the togglePopup with the user argument using es6 syntax:

closePopup={() => this.togglePopup(user)}

and binding togglePopup in the constructor:

constructor(props){
        super(props);
        this.state = { showPopup: false };
        this.togglePopup = this.togglePopup.bind(this);
    }

As for your second question, you are sending this.props.user to the Popup component which is probably undefined. You need to give it the user like this assuming user is an object:

user = { user }

Answer 2

Popup calls its closePopup prop with whatever arguments it wants. For example if it calls closePopup(someMouseEvent) , then in togglePopup , user will be set to someMouseEvent . onClose={togglePopup.bind(this, user)} would work because it ensures user gets passed as the first argument to the bound function before any arguments Popup passes, so if it calls closePopup(someMouseEvent) , togglePopup will actually get called with (user, someMouseEvent) .

I don't know what star is or why you have onClick={this.togglePopup.bind(this,star)} but that seems to be a mistake. I think you want user instead of star there.

Regarding question 2 it seems like what you probably want is to put user into this.state ; in togglePopup , call this.setState({user, showPopup: .this.state.showPopup}) , and in render pass <Popup user={this.state.user} /> .

Not sure how you were thinking togglePopup(user) would affect this.props.user , but it's a misunderstanding. The only way this.props.user will have a value is if you render <Table user={...} /> .