Question 285282 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Modal in react not showing when clicking a button

When I click the p tag the modal box shows up, but the title and text of the selected item in sidebarTitle, is not showing. I Have made an array with different titles and text, and I would like them to show up inside the modal, when a press one of their titles. Here is my code:

import React, { useState } from "react";
import "../sidebarStyles.css";

function Modal({ title, text, closeModal }) {
  return (
    <div className="modal">
      <div className="modal-content">
        <span className="close" onClick={closeModal}>
          X
        </span>
        <div className="content">
          <h2>{title}</h2>
          <p>{text}</p>
        </div>
      </div>
    </div>
  );
}

const sidebarTitle = [
  {
    title: "Text",
    text: "Modal",
  },
  {
    title: "Scope",
    text: "Modal",
  },
  {
    title: "Analysis",
    text: "Modal",
  },
];

function Sidebar() {
  const [selectedItem, setSelectedItem] = useState(false);

  const handleTitleClick = () => {
    setSelectedItem(true);
  };

  const closeModal = () => {
    setSelectedItem(false);
  };

  return (
    <div className="sidebar">
      {sidebarTitle.map((item, index) => (
        <div key={index}>
          <p onClick={handleTitleClick}>{item.title}</p>
        </div>
      ))}
      {selectedItem ? (
        <Modal
          title={selectedItem.title}
          text={selectedItem.text}
          closeModal={closeModal}
          className="modal"
        />
      ) : (
        !selectedItem
      )}
    </div>
  );
}

export default Sidebar;
Tags:

2

Answers


  1. 0

    In your code, selectedItem is a boolean state variable, and so it won’t have any properties such as title or text, that’s why you aren’t able to view anything on the UI. You can instead change it to an object such as –

    const [selectedItem, setSelectedItem] = useState({ visible: false, title: null, text: null})

    and then, change your functions in this way –

    const handleTitleClick = (title, text) => {
  setSelectedItem({
    visible: true,
    title: title,
    text: text
  }); 
};

    and –

    const closeModal = () => {
  setSelectedItem({
    visible: false,
    title: null,
    text: null
  });
};

    and change your p tag to look like this –
    <p onClick={()=>handleTitleClick(item.title, item.text)}>{item.title}</p>

    and to display the modal, instead of using selectedItem, use selectedItem.visible instead.
    if any other explanation is required, do let me know.

    Login or Signup to reply.
  2. 0

    Your selectedItem is of type boolean, so selectedItem.title get’s you undefined.
    Change your handler to :

    const handleTitleClick = (item) => {
    setSelectedItem(item);
  };

    and your map function to :

          {sidebarTitle.map((item, index) => (
        <div key={index}>
          <p onClick={() => handleTitleClick(item)}>{item.title}</p>
        </div>
      ))}

    And try not to use index as a key value. More on that topic here => error: Do not use Array index in keys

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search