Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
Save recent searches react js

Hi I m building a commerce app using react and I want to save recent searches made by users like this :

Recent searches example

I will be grateful if you could help me

thank you

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You can save it to local storage.

https://programmingwithmosh.com/react/localstorage-react/

see an example here and try to apply the same thing for "history" local storage.

about 4 years ago · Juan Pablo Isaza Relatório

0

Save searches into to the local storage just like that

function App() {
  const [history,sethistory]= useState({})

  useEffect(()=>{
    recover();
  },[])
  const recover=()=>{
     let data = JSON.parse(localStorage.getItem('history'));
     this.setState({history: data.history});
  }
  const onChangeHandler =(e)=>{
        e.preventDefault();

        this.setState({input: e.target.value});
    }

  const saveToStorage=()=>{
        //local storage only takes in key value pair so you would have to serialize it.
        let history = this.state.history ? this.state.history : {history: []};

        history.history.push({text:this.state.input, link:'store linke here'});

        localStorage.setItem('history', JSON.stringify(history));
  }
  return (
  <div>
    <input onChange={onChangeHandler}/>
      <Button onClick={saveToStorage}>
        Save
      </Button>
      <div className="your-side-bar">
          {this.state.history ? this.state.history.map((item) => {
              return (
                //render as state changes
                <Link to={item.link}>{item.text}</Link>
                )
          }) : 'no history'}
        </div>
  </div>
  );
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda