Así que quiero obtener una categoría de navegación que contenga íconos y etiquetas. He probado con Chips:
{categories.map((category) => ( <Chip key={category._id} avatar={<Avatar alt={category.name} src={category.icon} />} label={category.name} variant="outlined" onClick={(e) => handleClick(e)} value={category._id} /> ))}Intenté usar Tabs -> Tab. Pero no producen un "valor" cuando yo
const handleClick = (e) => { const valueTargeting= e.target.value; console.log(valueTargeting); };¿Hay alguna forma de usar alguno de estos, o tengo que recurrir a diseñar un botón? También observe que generan un "valor" cuando se hace clic en un área determinada (que es un área de superficie pequeña). ¿Es eso un error de mi parte?
El Chip no devuelve el value esperado porque el Chip no mantiene explícitamente un value . Para que devuelva un valor a su controlador de eventos, deberá ajustar el valor que desea que devuelva en el propio controlador onClick . Por ejemplo:
{categories.map((category) => { return ( <Chip label={category.name} // Notice 'category._id' being sent from the handler, not `e` onClick={handleClick(category._id})} /> ); })}Sandbox de código MUI 4 en funcionamiento: https://codesandbox.io/s/chip-click-mui4-ggl0z?file=/demo.js:940-1325
Sandbox de código MUI 5 en funcionamiento: https://codesandbox.io/s/chip-click-mui5-y5xkk?file=/demo.js