Ggtcf

The code below has three posts photos in the array. When I click on each post button am supposed to be seeing
Three post Photo div that corresponds to each post all at the bottom.

My Problem:

My issue is that it is showing just one post photo div which keeps replacing others after I added the CSS code below.

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 showing jammed div based on the CSS implementation

What I want:
I need to be seeing three div post photos if the three toggle button is clicked

Here is the 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>
 );
 

If I understand the issue correctly, then this can be fixed by adjusting your mainArea style object like so:

const mainArea=
 /* position: 'fixed', Remove position fixed */
 width: '80%',
 bottom: '0%',
 display: 'inline-block'

The fixed position basically has the effect of placing elements at a location on screen, relative to the client area of the window. This means that if you have multiple elements that share the same (default) coordinates, and are positioned with the fixed rule, then those elements will effectively overlap one another. This gives the appearance of only one element being visible at any given time.

For a working example, see this jsFiddle:
enter link description here

Hope that helps!