CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Oksana Shukh
Oksana Shukh

Reputation: 237

save data using hooks

I fetch data from goodreads API and save it in books array using hooks. I need to get data and display in component according to search query. but there is an issue in console (Uncaught TypeError: setSearchText is not a function)

function App() {
  const [books, setBooks] = useState([])
  const [searchText, setSearchText] = ('')

  const key = "xxx"
   const url =  `https://cors-anywhere.herokuapp.com/` +
      `https://www.goodreads.com/search/index.xml?key=${key}&q=${searchText}`;
  
  useEffect (()=> { 
    loadData()
  }, [])

   const loadData = async () => {
     axios.get(url).then((res) => {
       setBooks(res.data)
       console.log(books)
     })
   }
   const onTextChange = (e) => {
     setSearchText(e.target.value)
   }
  return (
    <>
        <Container>
            <h1>Bookstore</h1>
            <input type='text'
                   placeholder='Search...'
                   name="searchText"
                   onChange={onTextChange}
                   value={searchText}
            />

           
        </Container>
      
    </>
  );
}

Upvotes: 0

Views: 94

Answers (1)

sonkatamas
sonkatamas

Reputation: 621

You are missing a function call on the right side of the destructuring assignment.

const [books, setBooks] = useState([])
const [searchText, setSearchText] = ('') // This should be useState('')

Upvotes: 2

Related Questions