A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

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>
    );
  }







}

Answer №1

If I have a clear understanding of the issue at hand, it seems that making adjustments to your style object for mainArea can resolve the issue:

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

The fixed position places elements on the screen relative to the client area of the window. When multiple elements share the same (default) coordinates and are set with the fixed rule, they may overlap each other, giving the impression of only one element being visible.

To see a functional example, check out this jsFiddle: enter link description here

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am puzzled as to why my code in React is rendering twice without any apparent reason

I ran into a strange issue where my console.log("hi") was being displayed twice. I was working on a simple todo-list project and noticed that everything was getting double clicked. After some troubleshooting, it seems like the code is executing any JavaScr ...

Unexpected token error in React when using a conditional statement for an HTML link

I'm currently working with react and I want to display a link if one exists in the following way... {link ? <a href={link}> : } <h2>Link Content </h2> {link ? </a> : } However, when I try to compile it, ...

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved? For instance, ...

Every time I try to restart my React Project, it seems to encounter strange issues that

Currently, I am following a fullstack React tutorial which you can find here: React Tutorial I have encountered an issue where every time I close my laptop and reopen the project, npm start throws a strange error. Initially, I tried to fix it by starting ...

Erase chosen cells with React Material UI

I am utilizing a table example from material ui library. Check out the online project by following this link: https://codesandbox.io/s/209kpmpvx0 In this example, you can select multiple rows and a delete icon appears when a row is clicked. I am interes ...

Is there a way to select an option in the antd autocomplete component without it changing the input value?

When using autocomplete, clicking on an option typically changes the input value. However, I would like the input value to remain unchanged when selecting an option. I have attempted to revert the input value back in the onSelect callback function. Altho ...

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart ...

The background video on the website is having trouble resizing properly to fit the screen dimensions

I'm new to coding and I'm attempting to incorporate a background video on the homepage. The issue arises when I resize my window or view it on a mobile device, as the video fails to adjust to the window size, causing side scrolling that reveals t ...

Navigation bar with a full-page slider

I am trying to incorporate my bootstrap nav bar into a full-width slider, similar to the layout in this example. https://i.sstatic.net/LE9wP.jpg This is the full width slider http://codepen.io/grovesdm/pen/MazqzQ Currently, I have positioned the nav ba ...

Whenever the command "npm start" is executed, an error message stating "Unhandled promise rejection" is displayed

I am a beginner in the world of NodeJS and NPM. Upon executing npm start in my NodeJS project, I encountered the following errors: The development server is starting... (node:9417) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection ...

Expanding a non-bootstrap navigation bar upon clicking the menu

I'm having some difficulty getting my navigation menu to show up when I click the navigation menu icon. HTML nav role="navigation" class="navbar"> <div class="nav-header"> <a href="#"><span style="font-family: 'Cab ...

Extracting a dynamic parameter from a JSON object

Hey there, I'm new to JavaScript and have been searching for answers online for hours with no luck. I have a question regarding calling an API and receiving the following result: { "return_status":1, "return_message":"success", "data":{ ...

Upon the initial gallery load, the images are appearing on top of each

Currently, I am working on creating a gallery page for my website using the Isotop filtering plugin. To view the live gallery, you can visit: carroofies.com/gallery The main issue I am encountering is with the initial load of the page, where the images ov ...

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: https://i.sstatic.net/UcD2F.png Current code snippet: form with modal <%= form_for @note, :url => registrant ...

I'm having trouble launching the local server because when I try to run npm start, an error occurs. Why

I'm attempting to start a local server using Node.js. I've already run create-react-app and the files have been successfully created in the folder. However, when I try to run npm start, it throws an error. I'm using Debian 9 and encountering ...

What is the best way to integrate an API call into the map function to dynamically render DOM elements?

I am currently facing an issue where I am trying to utilize a promise within my map method, but the output is appearing as [object Promise]. However, when I check the code where I created the promise, I return the desired response data using res.data.itemT ...

Utilizing REACT to dynamically load multiple HTML elements

Recently, I began developing with React and wanted to load multiple new Input Fields and Labels in a Form using Hooks. However, when clicking the button, only one input field is created using the last value of my array. Upon checking the console, I notic ...

Guide to making control bar fade out when video is paused on video.js

Is there a way for the control bar to automatically disappear when the video is paused? Thank you in advance! ...

`React Component Input Verification: Ensuring Data Integrity`

At the moment, I'm diving into React and encountering a particular issue. I have added validation to my code, but it doesn't seem to be working correctly. Here is a snippet of my code: <TextField margin="dense" id="emai ...