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?