كيفية إظهار البيانات بعد إدخالها في React

أولا في ملف src\Components\Data.jsx يجب أن تقوم بإعادة الجدول هكذا حيث يجب كتابة return :

import React from "react";

const Data = (props) => {
    const { title, content } = props;

    return (
        <table>
            <td>{title}</td>
            <td>{content}</td>
        </table>
    )
};

export default Data;

بعد ذلك في ملف src\App.jsx يرجى وضع الكود التالي بعد سطر 58 مباشرة :

{taskes.map((task) => (
<Data
      key={task.title}
      title={task.title}
      content={task.content}
      />
))}

الآن ستظهر لك المهام ولكن يتوجب إضافة تنسيقات جيدة لها حاليا يمكنك تغير اللون للأبيض حتى تظهر معك . أى في ملف src\index.css يرجى وضع الكود التالي في نهاية الملف :

table {
  color: white;
}

App.jsx

هل هذا صحيح ان استدعي الازرار في ملف Data.jsx  

لاني اريد عند اضافة بيانات تظهر الازرار لكن مشكلة كيف سأستخدمهم في ملف رئيسي App.jsx

بتاريخ 5 دقائق مضت قال Hxfhf Ucicic:

هل هذا صحيح ان استدعي الازرار في ملف Data.jsx  

لاني اريد عند اضافة بيانات تظهر الازرار لكن مشكلة كيف سأستخدمهم في ملف رئيسي App.jsx

نعم بالطبع لا توجد اى مشكلة يمكنك وضعها وهذا هو المكان المناسب .

ولكن المنطق الخاص بتلك الأزرار يجب أن يكون في ملف App.jsx . حيث تقوم بتمرير دالة من App.jsx والتي يتم تنفيذها عند الحدث onClick في تلك الأزرار .

<button onClick={deleteTask}>Delete</button>

فهكذا الزر . ولكن الدالة deleteTask تقوم بتمريرها ك prop من الملف App.jsx

import React,{useState} from "react"
import Data from "./Components/Data";
// App.jsx
function App() {
  const [taskes , setTaskes] = useState([]);
  const [creating , setCreating] = useState(false)
  const [title,setTitle] = useState('')
  const [content , setContent] = useState('')


const titleChange = (event) => {
  setTitle(event.target.value)
}
const contentCahnge = (event) => {
  setContent(event.target.value)
}

const saveTaskes = () => {
  const task = {
    title: title,
    content: content
  }
  const updateTaskes = [...taskes , task]
  setTaskes(updateTaskes)
  setCreating(false)
  setTitle('')
  setContent('')
}



  const viewTheFildesInterface = () => {
    return(
       <div className="container">
      <h2>What are your tasks today?</h2>
      <hr />
      <input 
      type="text"
    placeholder="title"
    value={title}
    onChange={titleChange}
    />
      <textarea 
      name="content"
       id="content" 
       placeholder="content" 
       cols="30" 
       rows="10"
       value={content}
       onChange={contentCahnge}
       />
       <button onClick={saveTaskes}>Save</button>
    </div>
    )
  }

const HomeView = () => {
  return(
        <div className="parent">
       <h1>Welcome to my Applacation</h1>
   <button onClick={handelButtonClick} className="btn">Get Started</button>
     {taskes.map((task) => (
            <Data
              key={task.title}
              title={task.title}
               content={task.content}
               deleteTaskes={task.deleteTaskes}
               updateTaskes={task.deleteTaskes}
            />
          ))}
    </div>
    
  )
}


  const handelButtonClick = () => {
    setCreating(true)
  }
  return (
    <>
         <div> 
        {creating ? viewTheFildesInterface() : HomeView()}
        </div>
    </>
  )
}

export default App

لقد استخدمتهم ك prop لكن عندما اريد تعديل او حذف يظهر ان ليس معرف كالتالي

const deleteTaskes = () => {

}

import React,{useState} from "react";
// Data.jsx
const Data = (props) => {
    const {title , content , updateTaskes , deleteTaskes} = props;
    return(
     <table>
       <td>{title}</td>
        <td>{content}</td>
        <button onClick={updateTaskes}>Update</button>
        <button onClick={deleteTaskes}>Delete</button> 
    </table>
    )
   
};

export default Data;

بتاريخ 13 دقائق مضت قال Hxfhf Ucicic:

               deleteTaskes={task.deleteTaskes}
               updateTaskes={task.deleteTaskes}

المشكلة هنا أنك تمرر task.deleteTaskes ولكن هذا خاطئ . بل يجب تمرير دالة . وإنشاء تلك الدالة التي تقوم بحذف المهمة أو تعديلها .

هذا الأمر كما تم شرحه في مشروع تطبيق الملاحظات . يمكنك مراجعة هذا الجزء لفهمه بشكل أفضل.

لم اجد شرح لها حيث فقط استخدم editing الموجود في خطاف usestate ومن ثم ادخل حدث onclick في رابط الذي يحمل ايقونة القلم

بتاريخ 5 دقائق مضت قال Hxfhf Ucicic:

لم اجد شرح لها حيث فقط استخدم editing الموجود في خطاف usestate ومن ثم ادخل حدث onclick في رابط الذي يحمل ايقونة القلم

أولا توجد مشكلة أساسية لديك . وهي أنك لم تقم بوضع معرف فريد لل task  حيث يجب وضع id لل task وإعطائها رقم فريد لا يتكرر .

حيث ستستخدم هذا الرقم في البحث عن المهمة أثناء تحديثها أو حذفها .

يمكنك إضافته وفي دالة الحذف أو الحفظ تقوم بتمرير هذا ال id . وبعدها بداخل تلك الدالة تقوم بالبحث عن هذا ال id في مصفوفة tasks ومن ثم تقوم بحذفها .

يمكنك محاولة إنشاء المنطق السابق وإرفاق الكود بعد كتابته.