Transfering id of place to another component as props inside popup


I have a problem because I try to add place._id to another component as props (line 102), but I need to do it after click on button (line 96 and function editPlace – line 37-41) to display information about place inside popup. However I get totally various id’s after refreshing the page I know that it’s propably connected with rendering but to be honest I don’t know how to do it properly. I’ve tried to add EditPlaceForm to document but ref’s are not my strength yet and also I don’t know if it’s good strategy.

Numbers of lines are placed in comments.

import React, {
  Children,
  useContext, useRef, useState,
} from 'react';
import { Link } from 'react-router-dom';
import { removePlace, updatePlaceStatus } from '../../actions/FetchData';
import '../../scss/base/_users-list.scss';
import { PlacesContext } from '../../contexts/PlacesContext';
import EditPlaceForm from './EditPlaceForm/EditPlaceForm';
import '../../scss/base/_places-panel.scss';

function PlacesPanel() {
  const places = useContext(PlacesContext);
  const popupEl = useRef(null);
  const [placeToEdit, setPlaceToEdit] = useState(0);

  const handleChangeStatus = (event) => {
    const changedStatus = event.target.value;
    const changedPlaceId = event.target.id;
    updatePlaceStatus(changedPlaceId, changedStatus);
  };

  const removeSelectedPlace = (event) => {
    const removedPlaceId = event.target.value;
    const fetchMyData = async () => {
      await removePlace(removedPlaceId);
    };
    fetchMyData();
    window.location.reload(true);
  };

  {/* lines 37-42 here */}
  const editPlace = (e, placeId) => {
    setPlaceToEdit(placeId);
    popupEl.current.style.display = 'block';
    console.log(placeId, placeToEdit);
  };

  return (
    <>
      <div className="page-container">
        <h1>Users list</h1>
        {places.map((place) => (
          <div className="place-list-item" key={place._id}>
            <button className="remove-user-button" value={place._id} type="submit" onClick={removeSelectedPlace}>X</button>
            <div>
              <Link to={place._id}><img className="place-img" src={place.img} alt="place-img" width="100" height="100" /></Link>
            </div>
            <div className="place-name">
              <h4><Link to={place._id}>{place.name}</Link></h4>
            </div>
            <div className="place-address">
              <h5>
                {place.city}
                ,
                {' '}
                {place.street}
                ,
                {' '}
                {place.houseNo}
                ,
                {' '}
                {place.postalCode}
              </h5>
            </div>
            <div className="place-category">
              <p>
                Kategoria:
                {place.category}
              </p>
            </div>
            <div className="place-district">
              <p>
                Dzielnica:
                {place.district}
              </p>
            </div>
            <div className="place-status">
              <p>
                <b>
                  Status:
                  {place.statusPlace}
                </b>
              </p>
            </div>
            <p>ZmieƄ status: </p>
            <select onChange={handleChangeStatus} id={place._id}>
              <option selected value=""> </option>
              <option value="pending">pending</option>
              <option value="added">added</option>
            </select>
            {/* line 96 here */}
            <input className="edit-place-button" value="Edytuj" onClick={() => editPlace(this, place._id)} type="submit" />
          </div>
        ))}
        <div className="popup" ref={popupEl}>
          <div className="button-popup-container">
            <button type="submit" className="button-popup" onClick={() => { popupEl.current.style.display = 'none'; }}>X</button>
            {/* line 102 here */}
            <EditPlaceForm placeToEdit={placeToEdit} />
          </div>
        </div>
      </div>
    </>
  );
}
  
export default PlacesPanel;

Source: JavaSript – Stack Overflow

November 12, 2021
Category : News
Tags: javascript | popup | react-component | react-props | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.