How to use custom hook> - reactjs

Question

I am uploading an image and title for that image to firebase. I have made a custom hook(useStorage) which is used for uploading image and title for that image. I have two separate components UploadForm and ProgressBar, I am passing title and selected image and title from UploadForm to ProgressBar. I am able to make fields for image and title in firestore, image is getting uploaded but title field is remaining empty string.
I am attaching code for 3 files, any help would be appreciated.
import { useState, useEffect } from 'react';
import { projectStorage, projectFirestore, timestamp } from '../firebase/config';
const useStorage = (file) => {
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);
const [url, setUrl] = useState(null);
const [title, setTitle] = useState('');
useEffect(() => {
// references
const storageRef = projectStorage.ref(file.name);
const collectionRef = projectFirestore.collection('images');
storageRef.put(file).on('state_changed', (snap) => {
let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
setProgress(percentage);
}, (err) => {
setError(err);
}, async () => {
const url = await storageRef.getDownloadURL();
const createdAt = timestamp();
await collectionRef.add({ url, createdAt, title });
setUrl(url);
setTitle(title);
});
}, [file, title]);
return { progress, url, error, title };
}
export default useStorage;
import React, { useState } from 'react';
import ProgressBar from './ProgressBar';
const UploadForm = () => {
const [file, setFile] = useState(null);
const [error, setError] = useState(null);
const [header, setHeader] = useState('')
const types = ['image/png', 'image/jpeg'];
const handleChange = (e) => {
let selected = e.target.files[0];
if (selected && types.includes(selected.type)) {
setFile(selected);
setError('');
} else {
setFile(null);
setError('Please select an image file (png or jpg)');
}
};
return (
<form>
<label>
<input type="file" onChange={handleChange} />
<span>+</span>
</label>
<input placeholder="Enter title for pic..." type="text" name={header} onChange={(e)=> setHeader(e.target.value)} />
<div className="output">
{ error && <div className="error">{ error }</div>}
{ file && <div>{ file.name }</div> }
{ file && <ProgressBar file={file} setFile={setFile} header={header} /> }
</div>
</form>
);
}
export default UploadForm;
import React, { useEffect } from 'react';
import useStorage from '../hooks/useStorage';
import { motion } from 'framer-motion';
const ProgressBar = ({ file, setFile, header }) => {
const { progress, url, title } = useStorage(file);
useEffect(() => {
if (url) {
setFile(null);
}
}, [url, setFile]);
return (
<motion.div className="progress-bar"
initial={{ width: 0 }}
animate={{ width: progress + '%' }}
></motion.div>
);
}
export default ProgressBar;

Answer 1

useStorage have a [title, setTitle] hook which you use in
await collectionRef.add({ url, createdAt, title });
setUrl(url);
setTitle(title);
But the problem is that the title is empty. You never set a title. You pass the header to the progress bar, but you don't use it. You should update useStorage two take to arguments: file and header and call useStorage(file, header)
Update useStorage signature to const useStorage = (file, header) => {}
Inside useStorage you can update const [title, setTitle] = useState(header)

Answer 2

As far as I can tell you never get title from anywhere. All you do is send your state variable title which is initialized with '' to Firestore, then setTitle which that same empty string title.
Did you mean to pass header into your hook alongside file?