search bar in react js example

1// App.js
2
3import React, { useState, Fragment } from "react";
4import List from "./List";
5
6const App = () => {
7  const [userInput, setUserInput] = useState("");
8  const [list, setList] = useState([
9    "walk the dog",
10    "buy the milk",
11    "learn some code"
12  ]);
13
14  // userinput is controlled by the App component
15  const handleChange = e => {
16    setUserInput(e.target.value);
17  };
18
19  const addItem = e => {
20    if (userInput !== "") {
21      setList([...list, userInput]);
22      setUserInput("");
23    }
24  };
25
26  const removeItem = item => {
27    const updatedList = list.filter(listItem => listItem !== item);
28    setList(updatedList);
29  };
30
31  return (
32    <Fragment>
33      <List list={list} removeItem={removeItem} />
34      <hr />
35      <form>
36        <input
37          placeholder="Something that needs to be done..."
38          value={userInput}
39          onChange={handleChange}
40        />
41        <button type="button" onClick={addItem}>
42          {'Add Item'}
43        </button>
44      </form>
45    </Fragment>
46  );
47}
48
49export default App;
50

1import * as React from 'react';
2import { Searchbar } from 'react-native-paper';
3
4export default class MyComponent extends React.Component {
5  state = {
6    firstQuery: '',
7  };
8
9  render() {
10    const { firstQuery } = this.state;
11    return (
12      <Searchbar
13        placeholder="Search"
14        onChangeText={query => { this.setState({ firstQuery: query }); }}
15        value={firstQuery}
16      />
17    );
18  }
19}