0

I am trying to create a searchBar. When I type some value on input, I would like my listitems from github api to be re-listed with the value on searchBar.

import './App.css';

function App() {

  const [datas, setDatas] = useState([]);
  const [userid, setUserid] = useState('');
  
  const inputChanged = (event) => {
    setUserid(event.target.value)
  }

  const searchBar = () => {

  }

  useEffect(() => {

    fetch('https://api.github.com/search/repositories?q=react')
    .then(response => response.json())
    .then(data => {
      setDatas(data.items)
    })
  },[])
  return (
    <div className="App">
      <h1>Repositories</h1>
        <input id="searchInput"type="text" placeholder="search" name="search" value={userid} onChange={inputChanged}/>
        <button onClick={searchBar}>Search</button>
      <table>
        <tbody>
          <tr>
           <th>Name</th>
           <th>URL</th>
          </tr>
          {
          datas.map((data, index) => 
           <tr key={index}>
             <td>{data.full_name}</td>
             <td><a href={data.html_url}>{data.html_url}</a></td>
           </tr>
          )
        
          }
        </tbody>
      </table>
    </div>
  );
}

export default App;

Here is my code and the image of the localhost

enter image description here

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
David Bang
  • 1
  • 1
    Read [this answer](https://stackoverflow.com/a/35039198/1624844) on how to use query params, then instead of hard-coded `?q=react` use the mentioned method to change your search – Amir-Mousavi May 30 '21 at 13:59

1 Answers1

0

useEffect has an array at the end, when left empty what's in useEffect only update once. You can add variables to that array, to update when that variable changes.

Here you need to write: useEffect(your function,[userid]);

Bijin Abraham
  • 1,709
  • 2
  • 11
  • 25
nico263nico
  • 126
  • 11