barra de búsqueda ejemplo de código de reacción simple

Después de tanto luchar ya hallamos la solución de este contratiempo que tantos usuarios de nuestro sitio presentan. Si tienes algún detalle que aportar no dejes de compartir tu conocimiento.

Ejemplo 1: barra de búsqueda en el ejemplo de react js

// App.jsimportReact, useState,Fragmentfrom"react";importListfrom"./List";constApp=()=>const[userInput, setUserInput]=useState("");const[list, setList]=useState(["walk the dog","buy the milk","learn some code"]);// userinput is controlled by the App componentconsthandleChange=e=>setUserInput(e.target.value);;constaddItem=e=>if(userInput !=="")setList([...list, userInput]);setUserInput("");;constremoveItem=item=>const updatedList = list.filter(listItem=> listItem !== item);setList(updatedList);;return(<Fragment><List list=list removeItem=removeItem/><hr /><form><input
          placeholder="Something that needs to be done..."
          value=userInput
          onChange=handleChange/><button type="button" onClick=addItem>'Add Item'</button></form></Fragment>);exportdefaultApp;

Ejemplo 2: reaccionar barra de búsqueda

import*asReactfrom'react';importSearchbarfrom'react-native-paper';exportdefaultclassMyComponentextendsReact.Component
  state =
    firstQuery:'',;render()const firstQuery =this.state;return(<Searchbar
        placeholder="Search"
        onChangeText=query=>this.setState( firstQuery: query );
        value=firstQuery/>);

Si aceptas, puedes dejar un post acerca de qué le añadirías a este escrito.

---

---

Utiliza Nuestro Buscador