Estoy tratando de hacer el segundo <select> (Preencha o campo) para mostrar los resultados después de filtrar en el primer <select> (Propriedade). Intenté hacerlo usando el filtro pero sin éxito.
function Conversor() { const [C1, setC1] = useState(''); const [C2, setC2] = useState(''); const Medida = [ {id: 1, Unidade: 'ml', valor: 1, propriedade: 'Sala'}, {id: 2, Unidade: 'L', valor: 0.30, propriedade: 'Sala'}, {id: 3, Unidade: 'L', valor: 9.8, propriedade: 'Quarto'}, {id: 4, Unidade: 'Kg', valor: 0.01, propriedade: 'Cozinha'}, ]; let novamedida = Medida.filter( (ele, ind) => ind === Medida.findIndex( elem => elem.propriedade === ele.propriedade && elem.propriedade === ele.propriedade)) return ( <div className="conversor"> <h1>Exemplo</h1> <div className="Container"> <div> <label htmlfor="id: nome: Unidade">Propriedade</label> <select className="propriedade"> {novamedida.map(item => ( <option Key={item.propriedade} propriedade={item.propriedade} > {item.propriedade} </option> ))} </select> </div> <div> <div className="input"> <label htmlfor="id: nome: Unidade">Preencha o campo</label> <input className="campo 1" type="number" id='campo1' required="required"value={C1} onChange={(e)=> setC1(e.target.value)}/> </div> <select>{Medida.map(item2 => ( <option Key={item2.Unidade} Unidade={item2.Unidade} > {item2.Unidade} </option> ))} </select> </div> </div> </div> ); } export default Conversorintento esto
const mesmapropriedade = function(it) { if(it.propriedade == Medida.propriedade) { return true; } else { return false; } } const novaUnidade = Medida.filter(mesmapropriedade);Primero, debe almacenar el resultado de la primera selección dentro de una variable. Luego, puede filtrar la matriz Medida en función de esa variable, directamente dentro de la segunda selección:
import React, { useState } from "react"; function Conversor() { const Medida = [ { id: 1, Unidade: "ml", valor: 1, propriedade: "Sala" }, { id: 2, Unidade: "L", valor: 0.3, propriedade: "Sala" }, { id: 3, Unidade: "L", valor: 9.8, propriedade: "Quarto" }, { id: 4, Unidade: "Kg", valor: 0.01, propriedade: "Cozinha" } ]; // let novamedida = Medida.filter( (ele, ind) => ind === Medida.findIndex( elem => elem.propriedade === ele.propriedade && elem.propriedade === ele.propriedade)) // We put the proriedade in a list of string and remove duplicates. let novamedida = [...new Set(Medida.map((medida) => medida.propriedade))]; // Store the chosen propriedade const [chosenPropriedade, setChosenPropriedade] = useState(""); const [C1, setC1] = useState(""); const [C2, setC2] = useState(""); return ( <div className="conversor"> <h1>Exemplo</h1> <div className="Container"> <div> <label htmlfor="id: nome: Unidade">Propriedade</label> <select className="propriedade" onChange={(e) => { setChosenPropriedade(e.target.value) }} value={chosenPropriedade} > {novamedida.map((item, index) => ( <option key={index} value={item}> {item} </option> ))} </select> </div> <div> <div className="input"> <label htmlfor="id: nome: Unidade">Preencha o campo</label> <input className="campo 1" type="number" id="campo1" required="required" value={C1} onChange={(e) => setC1(e.target.value)} /> </div> <select> {Medida.filter( (medida) => chosenPropriedade === "" || medida.propriedade === chosenPropriedade ).map((item2) => ( <option key={item2.id} Unidade={item2.Unidade}> {item2.Unidade} </option> ))} </select> </div> </div> </div> ); } export default Conversor; Aquí Medida.filter((medida) => chosenPropriedade === '' || medida.propriedade === chosenPropriedade) , simplemente devolvemos todas las medidas si no se eligió ninguna propiedad, o solo devolvemos las que tienen la misma propriedade tiene la propiedadelegida.