Question 73959 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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>
  );
}
Tags:

3

Answers


  1. 0

    Try this code for handleEditBlog method.

      const handleEditBlog = (idx) => {
    const filterdata = blogList.filter((item) => item.id == idx);
    setEditData(filterdata);
  };
    Login or Signup to reply.
  2. 0

    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 :).

    Login or Signup to reply.
  3. 0

    in your handleEditBlog function

    const handleEditBlog = (idx) => {
console.log("Edit record ::" + idx);
const blog  = blogData.find(item=>item.id===idx)
    setEditData(blog);
}

    and make editData state as empty object {};

    then in the UI

     <div className="row">
        <div className="editBlogSection">
          <input type="text" name="heading" onChange={(e)=>onChangeValue(e.target,editData.id)} value={editData.heading}></input>
          <br></br>
          <input type="text" name="tags" onChange={(e)=>onChangeValue(e.target,editData.id)} value={editData.tag}></input>
        </div>
    </div>

    then create onChangeValue function like this to update blogdata

    const onChangeValue =(target,id)=>{
   let blogIndex = blogData.findIndex(item=>item.id===idx);
   if(blogIndex){
     let editCopy ={...editData};
     editCopy[target.name] =target.value;
     let data=[...blogData];
     data[blogIndex] = editCopy;
     setBlogList(data);
   } 
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search