I was attempting to follow a guide on creating an app using typescript and react, but I'm encountering an error that says "Cannot read properties of undefined (reading 'map')". I'm not sure why this is happening, can someone please offer some assistance?
Below is the code for the component:
import { useState } from 'react';
import { useTypedSelector } from '../hooks/useTypedSelector';
import { useActions } from '../hooks/useActions';
const RepositoriesList: React.FC = () => {
const [term, setTerm] = useState('');
const { searchRepositories } = useActions();
const { data, error, loading } = useTypedSelector(
(state) => state.repositories
);
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
searchRepositories(term);
};
return (
<div>
<form onSubmit={onSubmit}>
<input value={term} onChange={(e) => setTerm(e.target.value)} />
<button>Search</button>
</form>
{error && <h3>{error}</h3>}
{loading && <h3>Loading...</h3>}
{!error && !loading && data.map((name) => <div key={name}>{name}</div>)}
</div>
);
};
export default RepositoriesList;