In the array below, there are three post photos. When I click on each post button, I should see a corresponding post photo div at the bottom for each post.
Issue:
I am facing a problem where only one post photo div is being displayed, which keeps replacing the others after I added the following CSS code.
const mainArea={
position: 'fixed',
width: '80%',
bottom: '0%',
display: 'inline-block'
}
const photodiv={
position: 'relative',
width: '250px',
// height:auto,
background: 'orange',
color: 'black',
borderRadius: '5px 5px 0px 0px',
bottom: '0px',
}
Screenshot demonstrating the jammed div due to CSS implementation:
https://i.sstatic.net/9Vqdo.png
Desired Outcome: I want to see three div post photos when the three toggle buttons are clicked.
Main Code:
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
const mainArea={
position: 'fixed',
width: '80%',
bottom: '0%',
display: 'inline-block'
}
const photodiv={
position: 'relative',
width: '250px',
// height:auto,
background: 'orange',
color: 'black',
borderRadius: '5px 5px 0px 0px',
bottom: '0px',
}
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/apidb_react/1.png", visible: true , photoVisible: true},
{ id: "2", title: "my second title", image: "http://localhost/apidb_react/2.png", visible: true, photoVisible: true},
{ id: "3", title: "my third title", image: "http://localhost/apidb_react/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 => {
alert(id);
if(item.id === id) {
alert('ttto ' +item.id);
return { ...item, photoVisible: !item.photoVisible};
}
return item;
})
this.setState({
data: newData
});
}
*/
hideUnhidePhoto(id) {
this.setState(({ data }) => {
return {
data : data.map(item => ({
...item,
photoVisible : (id == item.id) ? !item.photoVisible : item.photoVisible }))
}
});
}
render() {
return (
<div>
<label>
<ul>
{this.state.data.map((post, i) => (
<li key={i}>
<div style={mainArea}>
<div style={photodiv}>
<div style={{ display: post.visible ? "none" : "block"}}>
<b>Post Data:</b> {post.title} --{post.id} <br />
<span style={{color: 'red'}} onClick={ () => this.hideUnhidePhoto(post.id) }> Hide/Unhide Photo</span>
<div style={{ display: post.photoVisible ? "block" : "none"}}>
<img src={post.image} />
</div>
</div></div>
</div>
<button onMouseDown={ () => this.toggle(post.id) }>Toggle </button><br />
<br />
</li>
))}
</ul>
</label>
</div>
);
}
}