search bar reat code example
Example 1: react search bar
import * as React from 'react';
import { Searchbar } from 'react-native-paper';
export default class MyComponent extends React.Component {
state = {
firstQuery: '',
};
render() {
const { firstQuery } = this.state;
return (
<Searchbar
placeholder="Search"
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={firstQuery}
/>
);
}
}
Example 2: search bar in react js example
import React, { useState, Fragment } from "react";
import List from "./List";
const App = () => {
const [userInput, setUserInput] = useState("");
const [list, setList] = useState([
"walk the dog",
"buy the milk",
"learn some code"
]);
const handleChange = e => {
setUserInput(e.target.value);
};
const addItem = e => {
if (userInput !== "") {
setList([...list, userInput]);
setUserInput("");
}
};
const removeItem = 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>
);
}
export default App;