title: react fires events for all items and the item selected
body: <p>I'm trying to fire the onClick event for the item that i clicked on. Not for all items.</p>
  
  <pre><code>&lt;Button onClick = {this.writeComment} varient="outlined" component="span" color="primary"&gt;
      {!this.state.isComment ? "Write Comment": "Close"}
  &lt;/Button&gt; 
  
  {this.state.isComment ? &lt;Comment onSubmit={this.commentSubmit} commentBody={this.state.comment_body} commentChange={this.handleCommentChange}/&gt; : null}
  </code></pre>
  
  <p><strong>writeComment function</strong></p>
  
  <pre><code>writeComment = (e)  =&gt; {
      e.preventDefault();
      this.setState({
          isComment:!this.state.isComment
      })   
  }
  </code></pre>
  
  <p>this should render a comment form for that item only, not for all items. This is within a <code>map</code> loop.</p>
  
  <pre><code>{this.state.images.length &gt; 0 ? (
          this.state.images.map( (img, i) =&gt; (     
              &lt;Grid item sm={12} md={12} key={i} style={{ margin: '30px 0px'}}&gt;
                      &lt;Paper style={{padding:'20px 20px'}}&gt;
                          {/* // empty image_title */}
                          &lt;Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center"&gt;{img.image_title}&lt;/Typography&gt; 
                          &lt;Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" /&gt;
                      &lt;Image image_url={img.img_url} /&gt;   
                      &lt;Typography variant="h6" align="center"&gt;{img.user.username}&lt;/Typography&gt; 
                      &lt;Typography variant="h6" align="center"&gt;{moment(img.created_at).calendar()}&lt;/Typography&gt; 
                      &lt;Button onClick = {this.writeComment} varient="outlined" component="span" color="primary"&gt;
                          {!this.state.isComment ? "Write Comment": "Close"}
                      &lt;/Button&gt;
  
                      {this.state.isComment ? &lt;Comment onSubmit={this.commentSubmit} commentBody={this.state.comment_body} commentChange={this.handleCommentChange}/&gt; : null}
  
  
                      &lt;Button onClick={() =&gt; this.deleteImg(img.id)} variant="outlined" component="span" color="primary"&gt;
                          Delete
                      &lt;/Button&gt;
                  &lt;/Paper&gt;                              
              &lt;/Grid&gt;
          ))
      ) : (
          &lt;div&gt;
              &lt;Grid item md={8}&gt;
                  &lt;Typography&gt;No Images yet&lt;/Typography&gt;
              &lt;/Grid&gt;
          &lt;/div&gt;
      )}
  &lt;/Grid&gt;
  {/* Images  */}
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>Full code</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Button from '@material-ui/core/Button';
  import TextField from '@material-ui/core/TextField';
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  import Paper from '@material-ui/core/Paper';
  import ImageUploader from 'react-images-upload';
  import Divider from '@material-ui/core/Divider';
  import Axios from '../Axios';
  import Image from './Image';
  import moment from 'moment';
  import Comment from './Comment';
  class Dashboard extends Component{
      constructor(props){
          super(props);
          this.state = {
              image_url: 'http://www.conservewildlifenj.org/images/artmax_1001.jpg', 
              images: [], 
              description:'',
              upload:false,
              isComment:false,
              comment_body:''
          }
      }
      handleUpload =  file =&gt;  {
          const data = new FormData()
          const image = file[0]
          // console.log(this.state.description)
          // data.append('ourImage', this.state.description)
          data.append('ourImage',image, this.state.description )
          Axios.post('/images/upload', data).then((response) =&gt; {
              const newImage = {...response.data}
              console.log(newImage);
              //update component-state
              this.setState({
                  description:'',   // resets title after upload
                  images: [
                    {
                      id: newImage[0].id,
                      user:{
                          username: newImage[0].user.username
                      },
  
                      image_title: newImage[0].image_title,
                      img_url: newImage[0].img_url,
                      created_at: new Date().toLocaleString().replace(',', ''),
                      updated_at: new Date().toLocaleString().replace(',', '')
                    },
                    ...this.state.images
                  ]
                })
  
          });
      }
      handleChange = (e) =&gt; {
          // e.preventDefault();
          this.setState({
              [e.target.name]: e.target.value
          })
          // console.log(this.state.description)
      }
  
      handleCommentChange = (e) =&gt; {
          this.setState({
              comment_body: e.target.value
          })
      }
      componentWillMount(){
          Axios.get('/images/uploads').then( (response) =&gt; {
              // let img;
              // let imgTitle;
              Object.keys(response.data).forEach( (key) =&gt; {
                  console.log(response.data[key]);
                  this.setState({
                      images:[ ...this.state.images, response.data[key]]
                  })
                  console.log(this.state.images);
              });
          })
      }
      componentDidUpdate(prevProps, prevState) {
          if (this.state.images.length !== prevState.images.length) {
              console.log(this.state.images);
          }
          // debugger;
      }
      onUploadClick = (e) =&gt; {
          e.preventDefault();
          this.setState({
              upload: !this.state.upload
          })
      }
      deleteImg = (id) =&gt; {
          Axios.post(`/images/delete/${id}`).then( () =&gt; {
             this.setState({
                 images: [ ...this.state.images.filter(img =&gt; img.id !== id)]
             })
          })
      }
      writeComment = (e)  =&gt; {
          e.preventDefault();
          this.setState({
              isComment:!this.state.isComment
          })   
      }
      commentSubmit = (e) =&gt; {
          e.preventDefault();
          console.log(this.state.comment_body);
          // Axios.post('/images/newComment', this.state.comment_body).then( (response )=&gt; {
          //     const newComment = { ...response.data};
          //     console.log(newComment);
          //     this.setState({
          //         comment_body: ''
          //     })
          // })
      }
      render(){
          const uploader = ( 
              &lt;ImageUploader
                  withIcon={true}
                  withPreview={true}
                  onChange={this.handleUpload}
                  singleImage={true}
                  buttonText='Upload an image'
                  imgExtension={['.jpg', '.gif', '.png', '.gif']}
                  maxFileSize={5242880}
              /&gt;
          )
          return(
              &lt;div&gt;
              &lt;Grid container justify="center" spacing={16}&gt;
                  &lt;Grid item sm={8} md={6} style={{ margin: '40px 0px', padding: '0px 30px'}}&gt;
                      &lt;Typography align="center" variant="h6"&gt;
                          Welcome to the Dashboard
                      &lt;/Typography&gt;
                          &lt;Button onClick={this.onUploadClick} variant="outlined" component="span" color="primary"&gt;
                              {/* toggle between Upload or Close
                                  Will be upload by default, else if upload is clicked, close will show.
                              */}
                              {!this.state.upload ? "Upload": "Close"}
  
                          &lt;/Button&gt;
                          &lt;br&gt;&lt;/br&gt;
                          &lt;br&gt;&lt;/br&gt;
                          {this.state.upload ? (
                              &lt;div&gt;
                               &lt;TextField
                                   id="outlined-name"
                                   label="Image Title"
                                   name="description"
                                   type="text"
                                   required={true}
                                   fullWidth
                                   style={{ borderRadius: '0px'}}
                                   className=""
                                   value={this.state.description}
                                   onChange={this.handleChange}
                                   margin="normal"
                                 /&gt;
                                  &lt;br&gt;&lt;/br&gt;
                                  &lt;br&gt;&lt;/br&gt;
                                  {/* so here what we are saying, if this text field is FILLED show the uploader component 
                                  else hide it.
                                  */}
                                  {this.state.description ? uploader : null}
  
                              &lt;/div&gt;
                          ):(
                              null
                          )}
                      {this.state.images.length &gt; 0 ? (
                          this.state.images.map( (img, i) =&gt; (     
                              &lt;Grid item sm={12} md={12} key={i} style={{ margin: '30px 0px'}}&gt;
                                      &lt;Paper style={{padding:'20px 20px'}}&gt;
                                          {/* // empty image_title */}
                                          &lt;Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center"&gt;{img.image_title}&lt;/Typography&gt; 
                                          &lt;Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" /&gt;
                                      &lt;Image image_url={img.img_url} /&gt;   
                                      &lt;Typography variant="h6" align="center"&gt;{img.user.username}&lt;/Typography&gt; 
                                      &lt;Typography variant="h6" align="center"&gt;{moment(img.created_at).calendar()}&lt;/Typography&gt; 
                                      &lt;Button onClick = {this.writeComment} varient="outlined" component="span" color="primary"&gt;
                                          {!this.state.isComment ? "Write Comment": "Close"}
                                      &lt;/Button&gt;
  
                                      {this.state.isComment ? &lt;Comment onSubmit={this.commentSubmit} commentBody={this.state.comment_body} commentChange={this.handleCommentChange}/&gt; : null}
  
  
                                      &lt;Button onClick={() =&gt; this.deleteImg(img.id)} variant="outlined" component="span" color="primary"&gt;
                                          Delete
                                      &lt;/Button&gt;
                                  &lt;/Paper&gt;                              
                              &lt;/Grid&gt;
                          ))
                      ) : (
                          &lt;div&gt;
                              &lt;Grid item md={8}&gt;
                                  &lt;Typography&gt;No Images yet&lt;/Typography&gt;
                              &lt;/Grid&gt;
                          &lt;/div&gt;
                      )}
                  &lt;/Grid&gt;
                  {/* Images  */}
                  &lt;/Grid&gt;
              &lt;/div&gt;
          )
      }
  }
  export default Dashboard;
  </code></pre>