title: ReactJS: How to hide/unhide images inside toggled list items
body: <p>I have implemented a React component that lists records, and allows records to be toggled (hidden and unhidden) via a <code>&lt;button&gt;</code> element.</p>
  
  <p>I now need to toggle/hiding/unhide the image of each list item, via a separate switch/button that is present for each list item:</p>
  
  <p><a href="https://i.stack.imgur.com/3P7Fx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3P7Fx.png" alt="screenshot"></a></p>
  
  <p>I currently have this code to toggle the display of images per list item:</p>
  
  <pre><code>  hideUnhidePhoto(id) {
      const newData = this.state.data.map(item =&gt; {
        if(item.id === id) {
          return { ...item, photoVisible: !item.photoVisible};
        }
  
        return item;
      })
  
      this.setState({
        data: newData
      });
    }
  </code></pre>
  
  <p>And, I have this <code>&lt;a&gt;</code> anchor element that allows the image display to be controlled via click event:</p>
  
  <pre><code>&lt;a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}&gt;
  Hide/Unhide Photo
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>The problem:</strong></p>
  
  <p>My issue is that each time I click on Hide/Unhide Photo button, rather than toggling the display of just the photo, clicking this button causes all the items in my list to hide:</p>
  
  <p><strong>My attempt:</strong></p>
  
  <pre><code>import React, { Component, Fragment } from "react";
  import { render } from "react-dom";
  
  
  class Focus extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        shown: true,
      };
    }
  
    componentDidMount() {
      this.setState({
        data: [
          { id: "1", title: "my first title", image: "http://localhost/1.png", visible: true , photoVisible: true},
          { id: "2", title: "my second title", image: "http://localhost/2.png", visible: true, photoVisible: true},
          { id: "3", title: "my third title", image: "http://localhost/3.png", visible: true, photoVisible: true}
        ]
      });
    }
  
  
    toggle(id) {
      const newData = this.state.data.map(item =&gt; {
        if(item.id === id) {
          return { ...item, visible: !item.visible};
        }
  
        return item;
      })
  
      this.setState({
        data: newData
      });
    }
  
  
  
  
  
    hideUnhidePhoto(id) {
      const newData = this.state.data.map(item =&gt; {
        if(item.id === id) {
          return { ...item, photoVisible: !item.photoVisible};
        }
  
        return item;
      })
  
      this.setState({
        data: newData
      });
    }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;label&gt;
            &lt;ul&gt;
              {this.state.data.map((post, i) =&gt; (
                &lt;li key={i}&gt;
                  &lt;div style={{ display: post.visible ? "none" : "block"}}&gt; 
  
  &lt;b&gt;Post Data:&lt;/b&gt; {post.title} --{post.id}   &lt;br /&gt;
  
  &lt;a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}&gt; Hide/Unhide Photo &lt;/a&gt;&lt;br /&gt;
  
  &lt;div style={{ display: post.visible1 ? "none" : "block"}}&gt; 
  
  &lt;img src={post.image} /&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
                  &lt;button onClick={this.toggle.bind(this, post.id)}&gt;Toggle ({post.id}) &lt;/button&gt;
                  &lt;br /&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>