Estoy tratando de poner en mayúscula el nombre del producto después de obtenerlo de una lista de productos usando un botón.
Básicamente, un botón obtiene los datos. Lo que nos da el nombre del producto como encabezado con un botón BORRAR y MAYÚSCULAS con cada elemento.
El botón Borrar elimina el elemento de la lista. Implementado. Botón de mayúsculas Pone en mayúsculas el nombre del producto.
No puedo averiguar cómo implementar la función de mayúsculas.
CÓDIGO::
capHandler function implements the functionality. import React, { useRef, useState } from 'react'; import axios from 'axios'; function App(){ const url = 'https://course-api.com/react-store-products'; const [products, setProducts] = useState([]); const productNameRef = useRef(); const fetchData = async () => { const { data } = await axios.get(url); setProducts(data); }; const clearProducts = () => { setProducts([]); }; const clearSingleProduct = (productID) => { const filteredArray = products.filter((item) => item.id != productID); setProducts(filteredArray); }; function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function capHandler() { console.log('Single Word Capitalized'); } return ( <> <button onClick={fetchData}>Fetch Products</button> <button onClick={clearProducts}>Clear Products</button> <div> {products.map((product) => { return ( <div ref={productNameRef} id={product.id} key={product.id}> <h3 className="productName">{product.name}</h3> <button onClick={() => clearSingleProduct(product.id)}> Clear </button> <button onClick={capHandler}>Capitalize</button> </div> ); })} </div> </> ); }; export default App;Actualice la función capHandler() con el siguiente cuerpo:
function capHandler() { setProducts(products.map(i => ({...i , name: capitalizeFirstLetter(i.name)})) }usted hace que capHandler acepte la identificación del índice del producto y actualice el estado.
function capHandler(id) { const newProducts = [...products] newProducts[i].name = capitalizeFirstLetter(newProducts[i].name) setProducts([...newProducts]); }También es necesario pasar el índice del mapa al mapear los productos.
<div> {products.map((product, i) => { return ( ...Por último, llame a la función en el botón
<button onClick={() => capHandler(i)}>Capitalize</button>