I am the newer for React js. How can i achieve the following logic using react js

Here is two div's and one button. When the user click the button these div should toggle .

I am the newer for React js. How can i achieve the following logic using react js

Here is two div's and one button. When the user click the button these div should toggle .

• javascript
• reactjs

Share Follow edited Nov 23, 2015 at 20:12 cfprabhu asked Nov 23, 2015 at 20:03 cfprabhucfprabhu 5,36222 gold badges2222 silver badges3333 bronze badges 1

• Stackoverflow stackoverflow./questions/24502898/… should help you – Davet Commented Nov 25, 2015 at 9:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use states, like this

var Component = React.createClass({
    getInitialState: function () {
        return {
            outsideText: 'Outside',
            insideText: 'Inside'
        }
    },

    handleClick: function () {
        this.setState({
            outsideText: this.state.insideText,
            insideText: this.state.outsideText
        })
    },

    render: function() {
        return <div>
            <div>
                { this.state.outsideText }
                <div>
                    { this.state.insideText }
                </div>
            </div>
            <button onClick={this.handleClick}>Change Text</button>
        </div>;
    }
});

Example