how to load a function when I click on a button in reactjs

Question

I'll be very grateful who can help me with this line I've this: how to load a function when I click on a button because now I have this but it does not work

export var Modulo = React.createClass({ prom1: function () { return( <div> <h1> CONTENT TWO</h1> <span >Para vos bebe</span> <span onClick={this.prom2}> Hasta agotar existencias</span> <span onClick={this.prom3}>Promociones de la hora</span> </div> ) }, prom2: function () { return( <div> <h1> CONTENT TWO</h1> <span onClick={this.prom1}>Para vos bebe</span> <span > Hasta agotar existencias</span> <span onClick={this.prom3}>Promociones de la hora</span> </div> ) }, prom3: function () { return( <div> <h1> CONTENT TREE</h1> <span onClick={this.prom1} >Para vos bebe</span> <span onClick={this.prom2}> Hasta agotar existencias</span> <span>Promociones de la hora</span> </div> ) }, render: function() { return this.prom2(); } })

thanks

You need to keep state in your component and depending on the state, render will have to call one if those methods. Having one of these methods be called as event handler doesn't make sense. Why would render magically return what the event handler returns? See the docs: facebook.github.io/react/docs/component-api.html — Felix Kling
– Felix Kling, Commented Mar 17, 2016 at 13:46

Oleksandr T. · Accepted Answer · 2016-03-17 16:01:17Z

In this case you should use states instead of create three different methods with markup, like this

var Modulo = React.createClass({ getInitialState: function () { var DEFAULT_TITLE = 'CONTENT One'; return { title: DEFAULT_TITLE, links: [{ link: 'Para vos bebe', title: DEFAULT_TITLE, isActive: true }, { link: 'Hasta agotar existencias', title: 'CONTENT TWO', isActive: false }, { link: 'Promociones de la hora', title: 'CONTENT THREE', isActive: false }] } }, handleClick: function(index) { var links = this.state.links.map((e, i) => { e.isActive = !!(i === index) return e; }); this.setState({ title: this.state.links[index].title, links: links }) }, render: function() { var links = this.state.links.map(function (link, index) { return <span key={index} className={ link.isActive ? 'active' : '' } onClick={ this.handleClick.bind(this, index) } > { link.link } </span> }, this); return <div> <h1>{ this.state.title }</h1> <div>{ links }</div> </div> } });

Example

Collectives™ on Stack Overflow

how to load a function when I click on a button in reactjs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related