Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

124
Vistas
what is the right way to implement the filter in this case

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);
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda