React (component) onClick method with parameter

Question

I have a problem of putting the parameter into the function. I've tried several solutions I've found here on Stack Overflow, but without success.

Here is my code:

function mapStateToProps(store) { return { un: store.measurement.unsaved, pat: store.patient.patients }; }

class MeasUnsaved extends Component{
    constructor(){
        super();
        this.showBtn = this.showBtn.bind(this);
        this.findPat = this.findPat.bind(this); this.createObj = this.createObj.bind(this);}
    findPat(id){
        let ps = this.props.pat.filter( p => (p.id === id) );
        return ps[0];
    }
    createObj(){
        let meas = [], i=0;
        this.props.un.forEach( u => {
            let pat = this.findPat(u.patId);
            let k = { date: u.date, fnote: u.fnote, patId: u.patId, name: pat.lastName+' '+pat.name, pos: i };
            i++;
            meas.push(k);
        });
        return meas;
    }
    showBtn(val){
        console.log(val);
    }
    render(){
        const unsaved = this.createObj();
        return (
            <Well>
                <fieldset>
                    <legend>Unsaved Measurement</legend>
                    <p>Unsaved Meas. will be lost after logout.</p>
                    {this.props.un.length === 0 && <p> You have 0 unsaved measurement </p>}
                    {this.props.un.length > 0 &&
                    <Table responsive>
                        <thead>
                            <tr><th>Date</th><th>Note</th><th>Patient</th><th>Actions</th></tr>
                        </thead>
                        <tbody>
                        {
                            unsaved.map(function(u){
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })
                        }
                        </tbody>
                    </Table>
                    }
                </fieldset>
            </Well>
        );
    }
} export default connect(mapStateToProps)(MeasUnsaved) ;

Here is the error:

ERROR: Uncaught Uncaught TypeError: Cannot read property 'showBtn' of undefined at onClick

Are you sure that's the error you get? `show tn` not `showBtn`? Also, what line? — Chris, May 04 '17 at 14:48
on the showBtn call you just need to put this or the e. in the function is where you can access the properties of the event — Miguel, May 04 '17 at 14:50
Doesn't make sense anyway since there's no `e` defined, so you'll need to fix that as well. — Dave Newton, May 04 '17 at 14:54
The reason your solution works is because the "arrow function" has a bound lexical scope("this" is never changing and pre-set). — Patrick, May 04 '17 at 15:23
FYI, there is a remark from someone under your (reposted) answer below that identifies a problem with your solution. — halfer, Jun 10 '17 at 20:10

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

You have two problems ;

you're using "this" inside "map" - see "this" is undefined inside map function Reactjs
you're executing this.showBtn on each row, what you'll want is to pass a function as an argument - this should be enough :

onClick={() => this.showBtn(u.pos)}

edited May 23 '17 at 12:34

Community

1
1

answered May 04 '17 at 15:01

Patrick

3,289
2
18
31

you'll need to sort both of these issues for your code to work as far as I can see(without running your code myself) – Patrick May 04 '17 at 15:06

score 0 · Answer 2 · edited May 23 '17 at 12:10

First of all, you are getting the error...

Uncaught TypeError: Cannot read property 'showBtn' of undefined

... at the line whre you are accessing this.showBtn. On that line, this is undefined because it's inside an anonymous function.

If you bind that function to this it will no longer be undefined:

unsaved.map(function (u) {
    return (
        <tr key={u.date+u.patId.toString()}>
            <td>{u.date}</td>
            <td>{u.fnote}</td>
            <td>{u.name}</td>
            <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
        </tr>
    );
}.bind(this))

Alternatively, you can use an arrow function:

unsaved.map((u) =>
    <tr key={u.date+u.patId.toString()}>
        <td>{u.date}</td>
        <td>{u.fnote}</td>
        <td>{u.name}</td>
        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
    </tr>
})

Secondly, to make your code work, you need to pass a function in onClick{}, but you are doing onClick={this.showBtn(e.pos)}. What this does it immediately call this.showBtn(e.pos) and pass the return value (which is undefined) to onClick={}.

Instead, do this ...

onClick={this.showBtn.bind(this, u.pos)}

... or this (using arrow function) ...

onClick={() => this.showBtn(u.pos)}

score 0 · Answer 3 · answered May 04 '17 at 20:53

(Posted on behalf of the OP).

Solved by:

unsaved.map((u)=>{
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={(event) => this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })

not a good option because render will create a new function each time. — hannad rehman, Jun 10 '17 at 20:06

React (component) onClick method with parameter

3 Answers3