87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
import { Snippet } from "@/components/Snippet";
|
|
|
|
const reactTodoListSnippets = [
|
|
{
|
|
name: "App.tsx",
|
|
codeLanguage: "tsx",
|
|
code: `import TodoList from "./TodoList";
|
|
import React from "react";
|
|
|
|
const App = () => {
|
|
return (
|
|
<div>
|
|
<h1>TodoList</h1>
|
|
<TodoList />
|
|
</div>
|
|
);
|
|
};`,
|
|
},
|
|
{
|
|
name: "TodoList.tsx",
|
|
codeLanguage: "tsx",
|
|
code: `import TodoListItem from "./TodoListItem";
|
|
import React from "react";
|
|
|
|
const TodoList = () => {
|
|
const [items, setItems] = React.useState<string[]>([]);
|
|
const [inputValue, setInputValue] = React.useState<string>("");
|
|
|
|
const handleInputValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setInputValue(event.target.value);
|
|
};
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
// On empêche le comportement par défaut du formulaire
|
|
event.preventDefault();
|
|
|
|
// On ajoute un nouvel élément à la liste des tâches
|
|
setItems([...items, inputValue]);
|
|
|
|
// On réinitialise la valeur de l'input
|
|
setInputValue("");
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<form onSubmit={handleSubmit}>
|
|
<label htmlFor="todolist-input"></label>
|
|
|
|
<input id="todolist-input" type="text" value={inputValue} onChange={handleInputValueChange} />
|
|
</form>
|
|
|
|
<ul>
|
|
{items.map((item, index) => (
|
|
<li key={index}>
|
|
<TodoListItem item={item} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TodoList;`,
|
|
},
|
|
{
|
|
name: "TodoListItem.tsx",
|
|
codeLanguage: "tsx",
|
|
code: `import React from "react";
|
|
|
|
interface TodoListItemProps {
|
|
item: string;
|
|
}
|
|
|
|
const TodoListItem = (props: TodoListItemProps) => {
|
|
return <span>{props.item}</span>;
|
|
};
|
|
|
|
export default TodoListItem;`,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
reactTodolist: () => {
|
|
return <Snippet snippets={reactTodoListSnippets} />;
|
|
},
|
|
};
|