No sé por qué, pero me sale este error constantemente cuando cambio la opción en el selector. "react-dom.development.js:4091 TypeError no detectado: onItemSelect no es una función" :(
import React from "react"; import Product from "./Product"; import ListGroup from "./listGroup"; export default function Main(props) { const { products, onAdd, categories } = props; const handleCategorySelect = () => { console.log("Click"); }; return ( <main className="block col-2"> <ListGroup items={categories} /> <h2>Products</h2> <div> {products.map((product) => ( <Product key={product.id} product={product} onAdd={onAdd} onItemSelect={handleCategorySelect} ></Product> ))} </div> </main> ); }y mi listGroup.jsx es:
import React from "react"; function ListGroup(props) { const { items, onItemSelect } = props; return ( <form> <select value="" id="category" name="category" onChange={() => onItemSelect()} > <option hidden value=""> Choose here </option> {items.map((item) => ( <option key={item._id}>{item.name}</option> ))} </select> </form> ); } export default ListGroup;y también, ¿cómo puedo pasar el objeto del elemento a onChange? Quiero decir, si fuera un grupo de lista, iría con:
<ul className="list-group"> {items.map(item => ( <li onClick={() => onItemSelect(item)} key={item[valueProperty]} className={ item === selectedItem ? "list-group-item active" : "list-group-item" } > {item[textProperty]} </li> ))} </ul>pero con select y opción no sé cómo hacerlo.
Es porque no pasaste la función al componente ListGroup
export default function Main(props) { ... <ListGroup items={categories} />Pero lo llamas al cambio
function ListGroup(props) { ... <select value="" id="category" name="category" onChange={() => onItemSelect()} >Prueba esto
<ListGroup items={categories} onItemSelect={handleCategorySelect} />Y así es como puede pasar el valor de la selección al componente principal:
function ListGroup({ items, onItemSelect }) { function handleItemChange(e) { onItemSelect(e.target.value); } return ( <div> <select onChange={handleItemChange}> {items.map((item) => <option key={item.name}>{item.name}</option>)} </select> </div> ); } function Main() { const items = [ { name: 'apple' }, { name: 'milk' }, { name: 'bread' }, { name: 'cheese' } ]; function handleListSelect(val) { console.log(`I selected ${val}`); } return ( <div> <ListGroup items={items} onItemSelect={handleListSelect} /> </div> ); } function App() { return ( <div> <Main /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>