ReactJS: How to hide/unhide images inside toggled list items - reactjs

Question

I have implemented a React component that lists records, and allows records to be toggled (hidden and unhidden) via a <button> element.
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:
I currently have this code to toggle the display of images per list item:
hideUnhidePhoto(id) {
const newData = this.state.data.map(item => {
if(item.id === id) {
return { ...item, photoVisible: !item.photoVisible};
}
return item;
})
this.setState({
data: newData
});
}
And, I have this <a> anchor element that allows the image display to be controlled via click event:
<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}>
Hide/Unhide Photo
</a>
The problem:
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:
My attempt:
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 => {
if(item.id === id) {
return { ...item, visible: !item.visible};
}
return item;
})
this.setState({
data: newData
});
}
hideUnhidePhoto(id) {
const newData = this.state.data.map(item => {
if(item.id === id) {
return { ...item, photoVisible: !item.photoVisible};
}
return item;
})
this.setState({
data: newData
});
}
render() {
return (
<div>
<label>
<ul>
{this.state.data.map((post, i) => (
<li key={i}>
<div style={{ display: post.visible ? "none" : "block"}}>
<b>Post Data:</b> {post.title} --{post.id} <br />
<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}> Hide/Unhide Photo </a><br />
<div style={{ display: post.visible1 ? "none" : "block"}}>
<img src={post.image} />
</div>
</div>
<button onClick={this.toggle.bind(this, post.id)}>Toggle ({post.id}) </button>
<br />
</li>
))}
</ul>
</label>
</div>
);
}
}

Answer 1

If I understand your question correctly, then it looks like there are a few small mistakes in your render function, namely this:
style={{ display: post.visible1 ? "none" : "block"}}
From what I can see, there is no visible1 field on your post items, which will cause unexpected behaviour for your image toggling. You might consider revising your render() function a detailed by the comments bellow:
render() {
return (
<div>
<label>
<ul>
{this.state.data.map((post, i) => (
<li key={i}>
<div style={{ display: post.visible ? "none" : "block"}}>
<b>Post Data:</b> {post.title} -- {post.id} <br />
{ /* Revise event handler binding with arrow function as shown.
Also consider a change from <a> to something like <span> to ensure
no default click behavour on <a> happens if href were added */ }
<span style={{color: 'red'}}
onClick={ () => this.hideUnhidePhoto(post.id) }>
Hide/Unhide Photo
</span>
<br />
{/* Update image display to be controlled via post.photoVisible
field */ }
<div style={{ display: post.photoVisible ? "block" : "none"}}>
<img src={post.image} />
</div>
</div>
{ /* I prefer to use arrow functions in general to make the code
a little more readable */ }
<button onMouseDown={ () => this.toggle(post.id) }>Toggle ({post.id}) </button>
<br />
</li>
))}
</ul>
</label>
</div>
);
}
Also, consider revising your hideUnhidePhoto() method like so, to ensure that mapped data for evey item is cloned:
hideUnhidePhoto(id) {
this.setState(({ data }) => {
return {
data : data.map(item => ({
...item,
photoVisible : (id == item.id) ? !item.photoVisible : item.photoVisible }))
}
});
}
Update
Here's a working JSFiddle demonstrating the solution:
https://jsfiddle.net/Lvyw5u4q/1/
Hope that helps

Answer 2

the easiest way to do this is to include a style of display property inside your constructor function and trigger this with your trigger function
inside constructor function of your class
this.mystyle= {
display: "none"
};
give image this style by
img src="..." alt="..." style={this.mystyle} /
toggle the image by this type of code
this.mystyle={display:'inline'};