title: How to handle onClick events for array objects in ReactJS?
body: <p>I am trying to add an <code>onClick</code> event handler to objects in an array where the class of a clicked object is changed, but instead of only changing one element's class, it changes the classes of all the elements.</p>
  
  <p>How can I get the function to work on only one <code>section</code> element at a time?</p>
  
  <pre><code>class Tiles extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              clicked: false,
              content : []
          };
      this.onClicked = this.onClicked.bind(this);
  
  componentDidMount() {
      let url = '';
      let request = new Request(url, {
          method: 'GET',
          headers: new Headers({
              'Content-Type': 'application/json'
          })
      });
      fetch(request)
      .then(response =&gt; response.json())
      .then(data =&gt; {
          this.setState({
              content : data
          })
      } );
  
  }
  
  onClicked() {
      this.setState({
          clicked: !this.state.clicked
          });
  }
  
  render() {
      let tileClass = 'tile-content';
      if (this.state.clicked) {
          tileClass = tileClass + ' active'
      }
      return (
      &lt;div className = 'main-content'&gt;
      {this.state.pages.map((item) =&gt; 
          &lt;section key = {item.id} className = {tileClass} onClick = {this.onClicked}&gt;
          &lt;h4&gt;{item.description}&lt;/h4&gt;
          &lt;/section&gt;)}
          &lt;br /&gt;
      &lt;/div&gt;
      )
   }
  
  class App extends React.Component {
      render() {
         return (
          &lt;div&gt;
              &lt;Tiles /&gt;
          &lt;/div&gt;
         )
   }
  }
  
  ReactDOM.render(
       &lt;App /&gt;,
      document.getElementById('content-app'))
  </code></pre>