Reactを利用したLaravelのyoutube管理アプリを作ってみよう！

				
					
import React, {useEffect, useState} from 'react';
import {Inertia} from '@inertiajs/inertia';
import {ChakraProvider, HStack, Text, VStack, Input, Textarea, Button, Select} from "@chakra-ui/react";


const Update = ({video, statuses}) => {
    const handleBack = () => {
        window.history.back();
    };

    // フォームデータの状態管理
    const [formData, setFormData] = useState({
        title: '',
        text: '',
        status: '',
        youtube_url: ''
    });

    // 初期データの設定
    useEffect(() => {
        if (video) {
            setFormData({
                title: video.title,
                text: video.text,
                status: video.status,
                youtube_url: video.youtube_url
            });
        }
    }, );

    const handleChange = (e) => {
        setFormData({...formData, [e.target.name]: e.target.value});
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        Inertia.put(`/videos/update/${video.id}`, formData)
    }

    return (
        <ChakraProvider>
            <VStack align={'start'} m={'20px'}>
                <Text fontSize='3xl'>動画編集</Text>
                <form onSubmit={handleSubmit}>
                    <HStack w={'780px'} p={'10px'} mt={'30px'} borderBottomWidth="1px">
                        <Text w={'180px'} fontWeight={'bold'}>タイトル</Text>
                        <Input placeholder='タイトル'
                               size='lg'
                               type="text"
                               id="title"
                               name="title"
                               value={formData.title}
                               onChange={handleChange}
                        />
                    </HStack>

                    <HStack w={'780px'} p={'10px'} borderBottomWidth="1px">
                        <Text w={'180px'} fontWeight={'bold'}>撮影内容</Text>
                        <Textarea placeholder='撮影内容'
                               id="text"
                               name="text"
                               value={formData.text}
                               onChange={handleChange}
                        />
                    </HStack>

                    <HStack w={'780px'} p={'10px'} borderBottomWidth="1px">
                        <Text w={'180px'} fontWeight={'bold'}>ステータス</Text>
                        <Select placeholder='ステータス' value={formData.status} onChange={(e) => setFormData({ ...formData, status: e.target.value })}>
                            {statuses.map((status, i) => <option key={i} value={i}>{status}</option>)}
                        </Select>
                    </HStack>

                    <HStack w={'780px'} p={'10px'} borderBottomWidth="1px">
                        <Text w={'180px'} fontWeight={'bold'}>URL</Text>
                        <Input placeholder='URL'
                               size='lg'
                               type="text"
                               id="youtube_url"
                               name="youtube_url"
                               value={formData.youtube_url}
                               onChange={handleChange}
                        />
                    </HStack>


                    <HStack m={'20px'}>
                        <Button type="submit" colorScheme='orange'>更新する</Button>
                        <Button onClick={handleBack}>戻る</Button>
                    </HStack>
                </form>
            </VStack>
        </ChakraProvider>
    );
};

export default Update