[FIXED] How to add multiple div panels to my main page in React

Issue

This question expands on my problem which got partially solved href="https://stackoverflow.com/questions/74362566/how-do-i-add-some-html-panels-from-my-modal-to-my-web-page-the-react-way">here. I have two components, ApplicationOverview.js and ApplicationModal.jsx and I want to dynamically add div panels to the ApplicationOverview.js Component from the Modal. In the Modal I have two input fields and I can add an image, which will be displayed on the div after I clicked on the 'Add' button. This is what the Modal looks like and this is what I am trying to achieve with n number of panels. (Note that the first 3 panels are hard coded)

So far, I can add a single div panel to my page, but whenever I try to add another one, it just changes the text of the panel that I just added. I am currently just toggling the visibility of that single div I am adding with a boolean (as you can see on the bottom of ApplicationOverview.js), but I can't figure out how I'd add multiple divs from my Modal to the page. Also, when I close the Modal but type something into the input fields, the text on the added div will still change without clicking on 'Add' beforehand.

ApplicationModal.jsx:

import React from "react";

var name = "";
var comment = "";
var filename = "";

const ApplicationModal = ({
  setOpen,
  setState,
  setStateComment,
  setFile,
  file,
  setBool,
}) => {
  React.useEffect(() => {
    function handleEscapeKey(event) {
      if (event.code === "Escape") {
        setOpen(false);
      }
    }
    document.addEventListener("keydown", handleEscapeKey);
    return () => document.removeEventListener("keydown", handleEscapeKey);
  });

  const handleComment = (e) => {
    
    setStateComment(e.target.value);
  };

  const handleChange = (e) => {
    
    setState(e.target.value);
  };
  const addNewApplication = () => {
    setBool(true);
    setOpen(false);
  };

  function openDialog() {
    document.getElementById("inputUpload").click();
  }

  function loadFile(e) {
    console.log(e.target.files);
    setFile(URL.createObjectURL(e.target.files[0]));
  }

  document.addEventListener("click", function (e) {});

  return (
    <React.Fragment>
      <div className="modalDark" style={{ paddingRight: "250px" }}>
        <div class="modal-dialog">
          <div class="modal-content" style={{ width: "800px" }}>
            <div class="modal-close">
              <div class="module-button" style={{ left: "750px" }}>
                <button
                  class="btn btn-link "
                  onClick={() => setOpen(false)}
                ></button>
                <div class="button-animation"></div>
                <div class="button-content new">
                  <i class="icon icon-dc_close"></i>
                </div>
              </div>
            </div>
            <div class="modal-header">
              <h3>Add new Application</h3>
            </div>
            <div class="modal-body">
              <div
                class="module-input form-group has-placeholder"
                data-plugin="moduleInput"
                style={{ bottom: "60px", width: "350px" }}
              >
                <label for="demo-default">Customer Name</label>
                <div class="input-animation-wrapper">
                  <input
                    type="text"
                    id="demo-default"
                    class="form-control "
                    maxLength="42"
                    placeholder="[Application Name]"
                    onChange={(e) => handleChange(e)}
                  />
                  <div class="input-animation"></div>
                </div>
              </div>
              <div
                class="module-textarea form-group floating-label has-placeholder"
                data-plugin="moduleInput"
                style={{ bottom: "60px" }}
              >
                <label for="demo-3">Customer Short text</label>
                <div class="input-animation-wrapper" style={{ width: "350px" }}>
                  <textarea
                    id="demo-3"
                    class="form-control"
                    rows="9"
                    placeholder="Short description of Customer; max. 280 characters"
                    maxLength={180}
                    onChange={(e) => handleComment(e)}
                    style={{ width: "350px" }}
                  ></textarea>
                  <div class="label-area"></div>
                  <div class="input-animation"></div>
                </div>
              </div>

              <img
                class="image"
                alt="Customer Logo"
                id="logo"
                src={file}
                style={{
                  left: "420px",
                  bottom: "280px",
                  position: "absolute",
                  height: "250px",
                }}
              />

              <div
                class="module-button"
                style={{
                  left: "500px",
                  bottom: "200px",
                  position: "absolute",
                  zIndex: "1",
                }}
              >
                <button
                  type="file"
                  class="btn btn-light"
                  onClick={() => openDialog()}
                  id="fileUpload"
                >
                  <input
                    type="file"
                    hidden={true}
                    accept="image/*"
                    id="inputUpload"
                    onChange={(e) => loadFile(e)}
                  ></input>
                </button>
                <div class="button-animation"> </div>
                <div class="button-content">
                  <span class="content-text">Upload Logo</span>
                </div>
              </div>

              <div
                class="module-button"
                style={{ bottom: "50px", width: "100px", textAlign: "center" }}
              >
                <button
                  type="button"
                  class="btn btn-secondary btn"
                  onClick={() => addNewApplication()}
                  id="adding"
                ></button>
                <div class="button-animation"></div>
                <div class="button-content">
                  <span class="content-text">Add</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default ApplicationModal;

export { name, comment, filename };

ApplicationOverview.js:

import React from "react";
import "../Overview.css";
import ApplicationModal from "../components/ApplicationModal.jsx";

var id = 0;

const ApplicationOverview = () => {
  
  const [open, setOpen] = React.useState(false);
  const [state, setState] = React.useState("");
  const [stateComment, setStateComment] = React.useState("");
  const [file, setFile] = React.useState("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/681px-Placeholder_view_vector.svg.png");
  const [bool, setBool] = React.useState(false);
  function addID()
  {
    id++;
    console.log(id)
    return id;
  }
  
  return (
    <div id="wrapper">
      {open && <ApplicationModal setOpen={setOpen} setState={setState} file={file} setBool={setBool} setFile={setFile} setStateComment={setStateComment} />}
      <div class="component-headline">
        <h4 style={{ color: "gray", display: "inline" }}>
          Application overview
        </h4>
        <div
          class="module-button"
          style={{
            backgroundColor: "rgb(18,205,212,255)",
            borderRadius: "12px",
            marginLeft: "1032px",
          }}
          onClick={() => setOpen(true)}
        >
          <button type="button" class="btn btn-secondary"></button>
          <div class="button-animation"></div>
          <div
            class="button-content"
            style={{
              backgroundColor: "rgb(18,205,212,255)",
              borderRadius: "12px",
            }}
          >
            <span class="content-text" style={{ color: "black" }}>
              Add Application
            </span>
          </div>
        </div>
      </div>

      <hr style={{ marginTop: "-20px" }} />
      <div class="center-content" id="center">
        <div class="overview-box">
          <img
            class="image"
            src="https://st.depositphotos.com/1968353/2535/i/600/depositphotos_25357041-stock-photo-close-up-of-machine-gears.jpg"
            alt="car"
          />
          <div class="box-content">
            <h3 class="overview-h3">Press</h3>
            <p class="overview-p">This Application is used for maintenance</p>
            <h3 class="overview-h3-second">Connected Products</h3>
            <h1 class="overview-h1-second">
              ?/?
              <p class="overview-p-second">Online</p>
            </h1>

            <div class="module-button" id="configure">
              <button type="button" class="btn btn-secondary"></button>
              <div class="button-animation"></div>
              <div class="button-content">
                <span class="content-text">Configure</span>
              </div>
            </div>
          </div>
        </div>
        <div class="overview-box">
          <img
            class="image"
            src="https://st.depositphotos.com/1968353/2535/i/600/depositphotos_25357041-stock-photo-close-up-of-machine-gears.jpg"
            alt="car"
          />
          <div class="box-content">
            <h3 class="overview-h3">Tooling Machine</h3>
            <p class="overview-p">
              This Application is used for drilling records
            </p>
            <h3 class="overview-h3-second">Connected Products</h3>
            <h1 class="overview-h1-second">
              ?/?
              <p class="overview-p-second">Online</p>
            </h1>

            <div class="module-button" id="configure">
              <button type="button" class="btn btn-secondary"></button>
              <div class="button-animation"></div>
              <div class="button-content">
                <span class="content-text">Configure</span>
              </div>
            </div>
          </div>
        </div>

        <div class="overview-box">
          <img
            class="image"
            src="https://st.depositphotos.com/1968353/2535/i/600/depositphotos_25357041-stock-photo-close-up-of-machine-gears.jpg"
            alt="car"
          />
          <div class="box-content">
            <h3 class="overview-h3">Storing Unit</h3>
            <p class="overview-p">
              This Application is used for store parameters
            </p>
            <h3 class="overview-h3-second">Connected Products</h3>
            <h1 class="overview-h1-second">
              ?/?
              <p class="overview-p-second">Online</p>
            </h1>

            <div class="module-button" id="configure">
              <button type="button" class="btn btn-secondary"></button>
              <div class="button-animation"></div>
              <div class="button-content">
                <span class="content-text">Configure</span>
              </div>
            </div>
          </div>
        </div>
        {(stateComment || state) && bool && <div class='overview-box' id={addID()}> <img class='image' src={file} alt='car'/> <div class='box-content'><h3 class='overview-h3' id='new-headline'>{state}</h3> <p class='overview-p'>{stateComment}</p><h3 class='overview-h3-second'>Connected Products</h3><h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p> </h1> <div class='module-button' id='configure'> <button type='button' class='btn btn-secondary'></button> <div class='button-animation'></div> <div class='button-content'> <span class='content-text'>Configure</span> </div> </div> </div> </div> }
      </div>
    </div>
  );
};

export default ApplicationOverview;

Solution

So if I understand your problem is that you have a modal and when you fill the modal and send add it will add the text and images to ApplicationOverview. I think you want to be able to do that several times. You want your users to be able to complete the modal again and again so it keep adding at the bottom of the ApplicationOverview.

So you need your ApplicationModal to have its own state. 
const [modalState, setModalState] = useState("");
const [modalCommentState, setCommentModalState] = useState("");
const [modalFile, setModalFile] = useState("");

so your handler function should be 

 const handleComment = (e) => {
    setCommentModalState(e.target.value);
  };

  const handleChange = (e) => {
    setModalState(e.target.value);
  };

 function loadFile(e) {
    setModalFile(URL.createObjectURL(e.target.files[0]));
  }

Your submit function
 const addNewApplication = () => {
    setOpen(false);
    setStates( oldArray => [...oldArray, {
     state:modalState,
     stateComment:modalCommentState,
     file: modalFile   } ]);
   
  };

in the ApplicationOverview.js 

const [states, setStates] = useState([]);

in your HTML section you loop through the state with a map
{ states.map((state)=> {
    return (
<div class='overview-box' id={addID()}>
                        <img class='image' src={state.file} alt='car'/>
                        <div class='box-content'>
                            <h3 class='overview-h3' id='new-headline'>{state.state}</h3>
                            <p class='overview-p'>{state.stateComment}</p>
                            <h3 class='overview-h3-second'>Connected Products</h3>
                            <h1 class='overview-h1-second'> ?/? <p class='overview-p-second'>Online</p></h1>
                            <div class='module-button' id='configure'>
                                <button type='button' class='btn btn-secondary'></button>
                                <div class='button-animation'></div>
                                <div class='button-content'>
                                    <span class='content-text'>Configure</span>
                                </div>
                            </div>
                        </div>
                    </div>
})}

So everytime the user submit the modal it will get added to the array of states and it will be display in the ApplicationOverview

Answered By - Letincel
Answer Checked By - - Candace Johnson (ReactFix Volunteer)