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, {
  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 =;
    const changedPlaceId =;
    updatePlaceStatus(changedPlaceId, changedStatus);

  const removeSelectedPlace = (event) => {
    const removedPlaceId =;
    const fetchMyData = async () => {
      await removePlace(removedPlaceId);

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

  return (
      <div className="page-container">
        <h1>Users list</h1>
        { => (
          <div className="place-list-item" key={place._id}>
            <button className="remove-user-button" value={place._id} type="submit" onClick={removeSelectedPlace}>X</button>
              <Link to={place._id}><img className="place-img" src={place.img} alt="place-img" width="100" height="100" /></Link>
            <div className="place-name">
              <h4><Link to={place._id}>{}</Link></h4>
            <div className="place-address">
                {' '}
                {' '}
                {' '}
            <div className="place-category">
            <div className="place-district">
            <div className="place-status">
            <p>ZmieƄ status: </p>
            <select onChange={handleChangeStatus} id={place._id}>
              <option selected value=""> </option>
              <option value="pending">pending</option>
              <option value="added">added</option>
            {/* line 96 here */}
            <input className="edit-place-button" value="Edytuj" onClick={() => editPlace(this, place._id)} type="submit" />
        <div className="popup" ref={popupEl}>
          <div className="button-popup-container">
            <button type="submit" className="button-popup" onClick={() => { = 'none'; }}>X</button>
            {/* line 102 here */}
            <EditPlaceForm placeToEdit={placeToEdit} />
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.