ReferenceError: Cannot access 'search' before initialization

Question

I keep getting this reference error and no idea what is wrong.

ReferenceError: Cannot access 'search' before initialization App C:/Users/GS66/Desktop/IN20/IFN666/week4/src/App.js:60 57 | 58 | export default function App() { 59 |

60 | const { loading, headlines, error } = useNewsArticles(search); 61 | const [search, setSearch] = useState(""); 62 | 63 | if (loading) {

This is the App part in App.js

export default function App() {
const {loading, headlines, error} = useNewsArticles(search);
const [search, setSearch] = useState("");

if (loading) {
    return <p>Loading...</p>;
}
if (error) {
    return <p>Something went wrong: {error.message}</p>
}

return (
    <div className="App">
        <h1>News Headlines</h1>
        <SearchBar onSubmit={setSearch}/> {
            headlines.map((headline) => (
                //headline is now an object
                <Headline key={headline.url} title={headline.title}/>
            ))
        }
    </div>
);

}

And this is the useNewsArticles function part from api.js.

export function useNewsArticles(search) {
const [loading, setLoading] = useState(true);
const [headlines, setHeadlines] = useState([]);
const [error, setError] = useState(null);

useEffect(() => {
    (async() => {
        try {
            setHeadlines(await getHeadlines(search));
            setLoading(false);
        } catch (err) {
            setError(error);
            setLoading(false);
        }
    })();
}, [search]);

    return {
        loading,
        headlines,
        error,
    };

}

Not sure what to say because the error says it all: you are using search before you define it, which happens one line further down... The :60 in the error means line 60 so this way you know which line the error is talking about — CherryDT
– CherryDT, Commented Apr 25, 2021 at 8:24
You're using search in line 2. You initialize search in line 3. — VLAZ
– VLAZ, Commented Apr 25, 2021 at 8:24

theWanderer · Accepted Answer · 2021-04-25 08:29:58Z

3

You are initializing search in line 3 and using in line 2. You should do the reverse, like

const [search, setSearch] = useState("");
const {loading, headlines, error} = useNewsArticles(search);

answered Apr 25, 2021 at 8:29

theWanderer

6562 gold badges13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriel Lupu · Accepted Answer · 2021-04-25 08:28:23Z

1

This error appears when you're trying to use a variable before declaring it.

First declare search with useState() then use it as a hook param.

answered Apr 25, 2021 at 8:28

Gabriel Lupu

1,4471 gold badge18 silver badges30 bronze badges

Collectives™ on Stack Overflow

ReferenceError: Cannot access 'search' before initialization

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related