How to switch tabs?

Question

React

var Tabs = React.createClass({
        render :  function () {
            return (
               <div id="tb">
                   <ul>
                       <li><a href='#tabs-1'>Эконом</a></li>
                       <li><a href='#tabs-2'>VIP</a></li>
                       <li><a href='#tabs-3'>Минивен</a></li>
                   </ul>
                   <section className='tabs-content'>
                       <article id='tabs-1'>1</article>
                       <article id='tabs-2'>2</article>
                       <article id='tabs-3'>3</article>
                   </section>
               </div>
            );
        }
    });
    ReactDOM.render(
        <Tabs  />,
        document.getElementById('tabs_content')
    );

how to make the tabs switch among themselves... and the content is displayed?

Answer 1

Here is the code, but it doesn't work. It does not give errors, the HOUSE is like this:
joxi.ru/eAON5LoTXdQ52o

class Tabs extends React.Component {
        constructor() {
            super()
            this.state = {tabIndex: 0}
        }
        render() {
            return (
                <div id="tb">
                    <ul role="tablist">
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
                    </ul>

                    <section className='tabs-content'>
                        {() => this.state.tabIndex === 0 ? <article>1</article> : null}
                        {() => this.state.tabIndex === 0 ? <article>2</article> : null}
                        {() => this.state.tabIndex === 0 ? <article>3</article> : null}
                    </section>
                </div>
            );
        }
    }
    ReactDOM.render( <Tabs  />, document.getElementById('tabs_content'));

Answer 2

This is React. Store in Tabs.state a pointer to an open tab, depending on it, render one or another <article/>. No links, no roles, no tabindex.

var Tabs = React.createClass({
        constructor() {
          this.state = {tabIndex: 0}
        }
        render :  function () {
            return (
               <div id="tb">
                   <ul role="tablist">
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
                   </ul>
                   
                   <section className='tabs-content'>
                       {() => this.state.tabIndex === 0 ? <article>1</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>2</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>3</article> : null}
                   </section>
               </div>
            );
        }
    });
    ReactDOM.render(
        <Tabs  />,
        document.getElementById('tabs_content')
    );