How can I get data based on id and pass data text field for editting

Trying to edit the blog data based on blog id, but I am not able to get the blog data. I would like to display the data in the input name columns heading, tags under the Blog data to display for edit. Could someone please advise ?

CSB link:

https://codesandbox.io/s/practical-turing-x8ph7k?file=/src/App.js

import "./styles.css";
import React, { useState, useEffect } from "react";
const blogListData = [
  {
    id: 1,
    heading: "React state",
    date: "20-May-2022",
    tag: "React",
    count: "3"
  },
  {
    id: 2,
    heading: "Cypress testing detailss",
    date: "21-May-2022",
    tag: "Cypress",
    count: "5"
  },
  {
    id: 3,
    heading: "Unix commands",
    date: "15-June-2022",
    tag: "Cypress",
    count: "2"
  }
];
export default function App() {
  const [blogList, setBlogList] = useState(blogListData);
  const [editData, setEditData] = useState([]);
  const [helperText, setHelperText] = useState("");

  const handleBlogDelete = (idx) => {
    // rest of the delete process here
  };

  const handleEditBlog = (idx) => {
    console.log("Edit record ::" + idx);
    const blogUpdateCopy = [...blogList];
    for (let blogData in blogUpdateCopy) {
      if (blogData.id === idx) {
        setEditData(blogUpdateCopy);
      }
    }
  };
  return (
    <div className="App">
      <div className="blogListSection">
        <h1>Edit blogs</h1>
        <div className="row">
          <div className="editBlogSection">
            {blogList.map(({ id, heading, tag, count }) => (
              <div className="row">
                <a
                  key={id}
                  href="https://www.google.com/"
                  className="blogitems"
                >
                  <pre>
                    <span>{tag}</span>{" "}
                    {!heading && heading.length > 15
                      ? heading.substring(0, 15) + "..."
                      : heading}
                    <span>{count}</span>
                  </pre>
                </a>
                <div className="blogitems edit">
                  <button onClick={() => handleEditBlog(id)}>Edit</button>
                </div>
                <div className="blogitems delete">
                  <button onClick={() => handleBlogDelete(id)}>Delete</button>
                </div>
              </div>
            ))}
          </div>
        </div>
        <h1> Blog data to display for edit</h1>
        <div className="row">
          {editData.map(({ id, heading, tag }) => (
            <div key={id} className="editBlogSection">
              <input type="text" name="heading" value={heading}></input>
              <br></br>
              <input type="text" name="tags" value={tag}></input>
            </div>
          ))}
        </div>
        <label>
          <span className="adminDeleteMsg">{helperText}</span>
        </label>
      </div>
    </div>
  );
}

>Solution :

Try this change in your Edit function it will work.

const handleEditBlog = (idx) => {
 const currentBlog = blogList?.find((item) => item?.id === idx);
 setEditData([currentBlog]);
};

Hope it will work, Thanks :).