Membuat crud product dengan vite react js and axios

RoisDev - Feb 19 - - Dev Community

fungsi create

import React, { useState } from 'react'
import Admin from '../layouts/admin'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

export default function CreateProduct() {
  const navigated =useNavigate();
  const [data, setData,error =[]]:any = useState({
    image: '',
    name: '',
    description: '',
    price: '',
    stock: ''
  })
  const handleSubmit = (e: any) => {
    e.preventDefault()
    console.log(data);

    axios.post('http://127.0.0.1:8000/api/products', data, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then(response => {
        setData({
          image: '',
          name: '',
          description: '',
          price: '',
          stock: ''
        })
        navigated('/product')
        alert('Berhasil di tambahkan')
      })
      .catch(error => {
        console.log(error.response.data)
      })
  }

  const handleChange = (e: any) => {
    setData({
      ...data,
      [e.target.name]: e.target.value
    })
  }

  const handleFileChange = (e: any) => {
    setData({
      ...data,
      image: e.target.files[0]
    })
  }

  return (
    <Admin>
      <form action="" onSubmit={handleSubmit} >
        <div className='mb-4'>
          <label htmlFor="" className='block mb-1'>thumnail Product</label>
          <input type="file" name='image' onChange={handleFileChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
          <img src={data.image} /> 
        </div>
        <div className='mb-4'>
          <label htmlFor="" className='block mb-1'>Nama Product</label>
          <input type="text" name='name' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
          {error.name && <small className='text-red-500'>{error.name}</small>}
        </div>
        <div className='mb-4'>
          <label htmlFor="" className='block mb-1'>description</label>
          <input type="text"  name='description' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Description Product' />
        </div>
        <div className='mb-4'>
          <label htmlFor="" className='block mb-1'>Price</label>
          <input type="text"  name='price' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Harga Product' />
        </div>
        <div className='mb-4'>
          <label htmlFor="" className='block mb-1'>stock</label>
          <input type="text"  name='stock' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Stock Product' />
        </div>
        <button type='submit' className='bg-zinc-800 rounded-md px-5 py-2 text-white cursor-pointer'> Simpan</button>
      </form>
    </Admin>
  )
}

Enter fullscreen mode Exit fullscreen mode

Fungsi edit

import React, { useEffect, useState } from 'react'
import Admin from '../layouts/admin'
import axios from 'axios'
import { useParams } from 'react-router-dom'

export default function CreateProduct() {
    const { id } = useParams()
    const [data,setData]: any = useState({
        image:'',
        name: '',
        description: '',
        price: '',
        stock: ''
    })
    useEffect(() => {
        axios.get('http://127.0.0.1:8000/api/products/' + id)
            .then((res) => {
                setData(res.data.data)
            })
    }, [])
    const handleSubmit = (e: any) => {
        e.preventDefault()
        console.log(data);
        axios.put('http://127.0.0.1:8000/api/products/'+ id,data,{
            headers:{
                'Content-Type' :'multipart/form-data'
            }
        })
            .then(res => {
                setData({
                    image:data.image,
                    name: data.name,
                    description: data.description,
                    price: data.price,
                    stock: data.stock
                  })
                  alert('Data Product berhasil di update')
            })
            .catch(error => {
                alert(error.response.data)
            })
    }

    const handleChange = (e:any) => {
        setData({
            ...data,
            [e.target.name]: e.target.value
        });
    }

    const handleFileChange = (e: any) => {
        setData({
            ...data,
            image: e.target.files[0]
        })
    }

    return (
        <Admin>
            <form action="" onSubmit={handleSubmit} >
                <div className='mb-4'>
                    <label htmlFor="" className='block mb-1'>thumnail Product</label>
                    <input type="file" name='image' onChange={handleFileChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
                    {/* <img src={products.image} /> */}
                </div>
                <div className='mb-4'>
                    <label htmlFor="" className='block mb-1'>Nama Product</label>
                    <input type="text" name='name' value={data.name} onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
                </div>
                <div className='mb-4'>
                    <label htmlFor="" className='block mb-1'>description</label>
                    <input type="text" name='description' value={data.description} onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Description Product' />
                </div>
                <div className='mb-4'>
                    <label htmlFor="" className='block mb-1'>Price</label>
                    <input type="text" name='price' onChange={handleChange} value={data.price} className='border border-gray-400 p-1 rounded-md' placeholder='Harga Product' />
                </div>
                <div className='mb-4'>
                    <label htmlFor="" className='block mb-1'>stock</label>
                    <input type="text" name='stock' onChange={handleChange} value={data.stock} className='border border-gray-400 p-1 rounded-md' placeholder='Stock Product' />
                </div>
                <button type='submit' className='bg-zinc-800 rounded-md px-5 py-2 text-white cursor-pointer'> Simpan</button>
            </form>
        </Admin>
    )
}

Enter fullscreen mode Exit fullscreen mode
. . . . .