➜ CategoriaStore Agregar una categoría

Componente CategoriaStore para agregar una categoria | Implementación del componente CategoriaStore que permita agregar una nueva categoría por parte del Rol admin

CRUD CategoriaCreate

            <Route path='categoria/create' element={<CategoriaStore/>} />

Config.jsx

    getCategoriaStore:(data)=>axios.post(`${base_api_url}/admin/categoria`,data),

pageadmin/CategoriaStore.jsx

import React, { useState } from 'react'
import Sidebar from './Sidebar'
import { Link, useNavigate } from 'react-router-dom'
import Config from '../Config'

const CategoriaStore = () => {
    const [nombre, setNombre] = useState('')
    const [descripcion, setDescripcion] = useState("")
    const [orden, setOrden] = useState("")
    const [urlfoto, setUrlfoto] = useState("")
    const navigate = useNavigate()

    const handleInputChange= async(e) =>{
        let files = e.target.files
        let reader = new FileReader();
        reader.readAsDataURL(files[0])
        reader.onload = (e)=>{
            setUrlfoto(e.target.result)
        }
    }

    const submitStore = async(e) =>{       
        e.preventDefault();
        await Config.getCategoriaStore({nombre,descripcion,orden,urlfoto})
        navigate('/admin/categoria')
    }
  return (
    <div className="container bg-light">
        <div className='row'>
            <Sidebar/>
            <div className="col-sm-9 mt-3 mb-3">
                <div className="card">
                    <div className="card-body">
                        <form onSubmit={submitStore}>
                            <div className='form-group row'>
                                <div className="col-sm-8">
                                    <label>Nombre</label>
                                    <input className='form-control' value={nombre} onChange={(e) => setNombre(e.target.value)} type='text'/>
                                </div>
                                <div className="col-sm-4">
                                    <label>Orden</label>
                                    <input className='form-control' value={orden} onChange={(e) => setOrden(e.target.value)} type='number'/>
                                </div>
                            </div>
                            <div className='mt-3'>
                                <label>Descripcón:</label>
                                <textarea className='form-control' value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
                            </div>
                            <div className='mt-3'>
                                <label>Imagen:</label>
                                <input className="form-control" type="file" onChange={(e) => handleInputChange(e)} />
                            </div>
                            <div className="btn-group mt-3">
                                <Link to={-1} className="btn btn-secondary" >← Back </Link>
                                <button type='submit' className="btn btn-primary">Crear Categoria</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default CategoriaStore

1079 visitas

Capítulo 23 – CategoriaUpdate Actualizar Categoría »

{ Curso ReactJS y Laravel Directorio de Empresas }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

➜ CategoriaStore Agregar una categoría

Descarga el código del proyecto

¡Qué aprenderás?