0

Estoy realizando un CRUD con laravel 9 y reactJS y estoy teniendo dificultades para hacer andar mi barra de busqueda.

Mi aplicación esta siendo anidada donde tengo un componente padre que se llama ShowProducts donde renderizo toda mi lista de productos y dentro de ese componente tengo un componente llamada Navbar donde tengo un search bar de tipo input.

En mi navbar estoy actualizando el estado del input usando useState:

import {Link} from 'react-router-dom'
import React, {useState} from 'react'

const Navbar = () => {

  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

Y en ShowProducts quiero filtrar mi array de productos y luego usar map según lo que ingrese en la busqueda.

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
import Navbar from './UI/Navbar.js';

const endpoint = 'http://localhost:8000/api';
const ShowProducts = () => {

    const [products, setProducts] = useState([]);
    
    useEffect(() => {
        getAllProducts();
    }, [])

    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();
    }



  return (
    <div>
        <Navbar/>
        
        <table className="table table-striped">
            <thead className='bg-primary text-white'>
                <tr>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Actions</th>
                </tr>
            </thead>
            
            <tbody>
                {products.filter((product)=>{
                    if(searchTextInput == ""){
                        return product;
                    } else if (product.description.toLowerCase().includes(searchTextInput.toLowerCase())){
                        return product;
                    }
                }).map((product)=>(
                    <tr key={product.id}>
                        <td >{product.description}</td>
                        <td >{product.price}</td>
                        <td >{product.stock}</td>
                        <td >
                        <Link to={`/edit/${product.id}`} className='btn btn-warning'>Edit</Link>
                            <button onClick={()=>deleteProduct(product.id)} className="btn btn-danger">Delete</button>
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
  )
}

export default ShowProducts

El inconveniente es que tengo que es no puedo utilizar mis variables en ShowProducts porque searchTextInput y setSearchTextInput estan siendo declaradas en mi navbar. Como puedo hacer para poder utilizarlas en mi componente padre?

1 respuesta 1

2

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

**

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 }) => {
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.