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
– Chris, Commented May 4, 2017 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
– Miguel, Commented May 4, 2017 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
– Dave Newton, Commented May 4, 2017 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
– Patrick, Commented May 4, 2017 at 15:23

Community · Accepted Answer · 2017-05-23 12:34:19Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered May 4, 2017 at 15:01

Patrick

3,3752 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Over a year ago

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)

Community · Accepted Answer · 2017-05-23 12:10:35Z

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)}

halfer · Accepted Answer · 2017-05-04 20:53:41Z

0

(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>
                                );
                            })

answered May 4, 2017 at 20:53

community wiki

halfer

1 Comment

hannad rehman Over a year ago

not a good option because render will create a new function each time.

Collectives™ on Stack Overflow

React (component) onClick method with parameter

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related