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;