$re = '/wald493#2/m';
$str = '
//zeigt nur 1nen Eintrag an
export default function SchuelerEintrag({Schueler, onDelete, onEdit}){
return(
<div>
<br></br>
<h1>Name: {Schueler.name}</h1>
<p>Money: {Schueler.money}</p>
<button type = "button" className="bg-red-500 py-2 px-4 hover:bg-red-400" onClick={() => onDelete(Schueler.id)}>
Delete
</button>
<button type ="button" className="bg-yellow-500 py-2 px-4 hover:bg-red-400" onClick={() => onEdit(Schueler)}>
Edit
</button>
</div>
)
//SchülerForm
import { Sumana } from "next/font/google";
import { useForm, Controller } from "react-hook-form";
import { z } from "zod";
import {zodResolver} from "@hookform/resolvers/zod"
import { useEffect } from "react";
const SchuelerSchema = z.object({
name: z.string().min(1, "Name ist zu kurz"),
money: z.coerce.number({invalid_type_error: "muss eine Zahl sein"}).gt(0, "Zahl muss größer als 0 sein").int("muss eine ganze Zahl sein")
})
try{
const result = SchuelerSchema.parse({name: ""})
} catch(error){
console.log(error.issues)
}
export default function SchuelerForm ({onSubmit, editData}){
const {
control,
handleSubmit,
reset,
formState: {errors}
} = useForm({
resolver: zodResolver(
SchuelerSchema
),
defaultValues: {
name: "",
money: 0
}
})
useEffect(() => {
if(editData){
reset(editData)
}else{
reset({name: "", money: 0})
}
}, [editData, reset])
const submitHandler = (data) => {
onSubmit(data);
reset( {name: "", money: 0});
}
return(
<div>
<form
onSubmit={handleSubmit(submitHandler)}
>
<div>
<label>
name:
</label>
<Controller
name="name"
control={control}
render={({ field })=> (
<input className="bg-amber-300 text-black"
{...field}
type = "text"
placeholder="Mustername"
/>
)}
/>
</div>
<div>
<label>
money:
</label>
<Controller
name="money"
control={control}
render={({field}) => (
<input className="bg-amber-300 text-black"
{...field}
type = "number"
placeholder="0"
/>
)}
/>
</div>
<button type = "sumbit">
Speichern
</button>
</form>
<br></br>
{
errors.name && (<p>{errors.name.message}</p>)
}
{
errors.money && (<p>{errors.money.message}</p>)
}
<br></br>
</div>
);
}
//SchülerListe
import SchuelerEintrag from "./SchuelerEintrag"
export default function SchuelerListe({Liste, handleDelete, handleEdit}){
if(Liste.length == 0){
return(
<p>keine Einträge</p>
)
}
return(
<div>
{
Liste.map((Eintrag) => (<SchuelerEintrag Schueler={Eintrag} onDelete={handleDelete} onEdit={handleEdit} key = {Eintrag.id}/>))
}
</div>
)
}
//page.js
import Image from "next/image";
import SchuelerForm from "./components/SchuelerForm";
import SchuelerListe from "./components/SchuelerListe";
import { useState } from "react";
export default function Home() {
const [SchuelerEinträge, setSchuelerEinträge] = useState([]);
const [editData, setEditData] = useState(null);
const addItem = (data) => {
if(editData){
setSchuelerEinträge((prev) => prev.map((s)=>(s.id === editData.id ? {...data, id: editData.id} : s) ) )
setEditData(null)
} else{
setSchuelerEinträge((prev)=> [...prev, {...data, id: Date.now()}])
}
}
const handleEdit = (Schueler) => {
setEditData(Schueler)
}
const deleteItem = (id) => {
setSchuelerEinträge((prev) => prev.filter((Eintrag) => Eintrag.id != id))
}
return (
<div>
<SchuelerForm onSubmit={addItem} editData={editData}/>
<SchuelerListe Liste={SchuelerEinträge} handleDelete={deleteItem} handleEdit={handleEdit}/>
</div>
);
}
';
preg_match_all($re, $str, $matches, PREG_SET_ORDER, 0);
// Print the entire match result
var_dump($matches);
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for PHP, please visit: http://php.net/manual/en/ref.pcre.php