Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

123
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!