Hello everyone,
Im currently learning react and having trouble with custom hooks. Im using openweatherAPI for practice. I wanted to create custom hook to reorganize fetched value so its easier to access. I created a function which is working as intended but I want to use it as custom hook since I want to use it multiple times.
App.js
import React, {useState, useEffect} from 'react';
import { useFilter } from "./useFilter";
import './App.css';
function App() {
const [weather, setWeather] = useState([]);
const [query, setQuery] = useState("");
const [searchValue, setSearchValue] = useState("");
const [filteredArray, setArray] = useFilter([]);
useEffect(() => {
if(query !== ""){
fetchCall();
}
},[query]);
const fetchCall = async () =>{
const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
const response = await request.json();
setArray(response.list);
console.log(filteredArray);
}
const search = (e) =>{
setSearchValue(e.target.value);
}
const submitValue = e =>{
e.preventDefault();
setQuery(searchValue);
}
return (
<div className="App">
<form onSubmit={submitValue}>
<input type="text" placeholder="enter city name" onChange={search}></input>
<button type="submit">getWeather</button>
</form>
</div>
);
}
export default App;
hook that I created
import {useState} from 'react';
export const useFilter = response =>{
console.log(response);
const [value, setValue] = useState(response);
return [value, response => {
const getDtText = (value) =>{
return value.split('').slice(0,10).join('');
}
let fiveDaysArray = [];
let tempArr = [];
let tempVal = response[0];
tempVal = getDtText(tempVal.dt_txt);
response.map( result => {
if(getDtText(result.dt_txt) !== tempVal){
fiveDaysArray.push(tempArr);
tempArr = [];
tempVal = getDtText(result.dt_txt);
tempArr.push(result);
}else{
tempArr.push(result);
}
})
return(fiveDaysArray);
}];
}
Problem is; when I sent response here:
setArray(response.list);
and console.log(response) in useFilter component it retrieves empty array. Also useFilter triggers everytime i type something in input and two times on page load. Can anyone please, help me to understand what im doing wrong and maybe point me in right direction with creating custom hooks?
Thanks in advance.