I'm trying to make the second <select> (Preencha o campo) to show the results after filtering on the first <select> (Propriedade). I tried to do using the filter but without success.
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 Conversor
i try this
const mesmapropriedade = function(it) {
if(it.propriedade == Medida.propriedade) {
return true;
} else {
return false;
}
}
const novaUnidade = Medida.filter(mesmapropriedade);
First, you should store the result of the first select inside a variable. Then, you can filter the Medida array based on that variable, directly inside the second select:
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;
Here Medida.filter((medida) => chosenPropriedade === '' || medida.propriedade === chosenPropriedade), we just return all of the Medida if no propriedade was chosen, or we return just the ones which have the same propriedade has the chosenPropriedade.