Displaying array data onclick in React

Based on my understanding to your question may be you are trying to achieve this -

let users = [{
  name: "abcd"
}, {
  name: "xyz"
}, {
  name: "temp"
}];

class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        activeIndex: 0
      };
    }

  tick =() => {
    let activeIndex = this.state.activeIndex;
    if (activeIndex == this.props.users.length -1){
      activeIndex = 0;
      } else {
        activeIndex++;
        }
    this.setState({
      activeIndex
    });
  }

    render() {
        return ( 
      < ul className = "list-group" >
          < li className = "list-group-item" > 
                {this.props.users[this.state.activeIndex].name} 
                < button className = "btn btn-default" onClick={this.tick} >
                  show Next 
                < /button> 
              </li >
          < /ul>
      );
      }
    }

    ReactDOM.render( 
      < Example users = {users}/ > ,
          document.getElementById('test')
     );

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="test">
</div>

Keep the index of activeUser in state, then render just this one user: { this.state.users[ this.state.activeUser ].name}. Increment/decrement the activeUser on click.

demo on jsfiddle

var Users = React.createClass({
    getInitialState(){
    return {
        users : [{ name : 'John'}, { name : 'Jane'}, { name : 'Robert' }],
        activeUser : 0
    };
  },
  next(){
    /* here you should add checking if there are more users before setting the state */
    this.setState({ activeUser : this.state.activeUser + 1 });
  },
  render: function() {
    return (<div>
        <p>{ this.state.users[ this.state.activeUser ].name} </p>
        <span onClick={ this.next }>next</span>
      </div>);
  }
});

Seems like you have the pseudo code there in your question which like Rajesh asked seems to describe some kind of paginated list of users/carousel.

You'll need to define the maximum number of users that are visible in the list and then store the current topmost element index. I'd suggest storing these in state.

Then store the list of names as an array of object each containing the name details as well as a parameter that will represent whether it is visible or not.

Your initial state could look like this:

{
  currentTopElement: 0,
  maxNamesToShow: 1,
  names: [
    {name: 'John Smith', isVisible: false},
    {name: 'Jane Smith', isVisible: false},
    ...etc.
  ]
}

• Add a click handler on your button would be required that would increment the currentTopElement by one.

• iterate through the names array setting isVisible to false unless the index matches that of currentTopElement, if it does set isVisible to true

To finish off, in the component that needs to render your names list can do so if you conditionally render a name only if its corresponding isVisible value is true:

const elementsToShow = this.state.filter( t => t.isVisible);

You can the iterate over elementsToShow like so:

elementsToShow.map((user, index) => <p key={ index }>{user.name} </p>);