Skip to main content
se añadieron 1036 caracteres en el cuerpo
Origen Enlace

Esto lo puedes mejorar

 const getAllProducts = async() =>{
        const response = await axios.get(`${endpoint}/products`);
        setProducts(response.data);
    }

    const deleteProduct = async(id) =>{
        const response = await axios.delete(`${endpoint}/product/${id}`);
        getAllProducts();
    }

crea un archivo llamado cliente o como quieras client.js

**import axios from "axios";

export let createClient = () => {
  
  return axios.create({
    baseURL: process.env.REACT_APP_API_HOST
   
  });
};

export default createClient;**

no olvides crear un .env con la variable REACT_APP_API_HOST

ya en tus componentes no debes añadir cada vez el endpoint solo llamas este js y el metodo con la ruta apartir del endpoint

ejemplo

import client from "../axios/axios-client";


 client().get("rutadespuesdelocalhost")
        .then(({ data }) => {
});

Esto lo puedes mejorar

 const getAllProducts = async() =>{
        const response = await axios.get(`${endpoint}/products`);
        setProducts(response.data);
    }

    const deleteProduct = async(id) =>{
        const response = await axios.delete(`${endpoint}/product/${id}`);
        getAllProducts();
    }

crea un archivo llamado cliente o como quieras client.js

**import axios from "axios";

export let createClient = () => {
  
  return axios.create({
    baseURL: process.env.REACT_APP_API_HOST
   
  });
};

export default createClient;**

no olvides crear un .env con la variable REACT_APP_API_HOST

ya en tus componentes no debes añadir cada vez el endpoint solo llamas este js y el metodo con la ruta apartir del endpoint

ejemplo

import client from "../axios/axios-client";


 client().get("rutadespuesdelocalhost")
        .then(({ data }) => {
});
Origen Enlace

Puedes pasar los datos que quieras por props, ya si tienes muchisimas anidaciones es mejor usar context, pero en tu caso solo pasa lo que quieras por props

-Si vas a afectar el estado products puedes afectarlos con el estado del padre, tambien puedes crear la busqueda en el padre y pasar la funcion o solo pasando el seteador, el límite es el cielo

Show products

 <Navbar products={products} setProducts={setProducts}/>

Navbar component

**

import {Link} from 'react-router-dom'
import React, {useState} from 'react'
const Navbar = ({products,setProducts}) => {
  const [searchTextInput, setSearchTextInput] = useState('');
  return (
    <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-dark">
        <div className="container-fluid">
            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className='d-grid gap-2'>
                <Link to="/create" className='btn btn-success btn-lg mt-2 mb-2 text-white'>New Product</Link>
            </div>
            
            <form className="d-flex">
                <input className="form-control me-2"  
                type="search" 
                onChange={event => {setSearchTextInput(event.target.value)}} 
                placeholder="Search" 
                aria-label="Search"
                />
                
                <button className="btn btn-outline-success" type="submit" >Search</button>
            </form>
            
        </div>
        </nav>
    </div>
  )
}
export default Navbar

**