React Javascript value showing undefined

Question

I am writing a custom hook for my react app . I have finished writing it but I dont know why the value of my constant preFixedKey is showing undefined. Plz help me.

import { useEffect, useState } from 'react'

const PREFIX = 'whatsapp-clone-'

const useLocalStorage = (key, initialValue) => {
 

    const preFixedKey = PREFIX + key
    
    const [value,setValue] = useState(
        () => {
            const localData = localStorage.getItem(preFixedkey)
            if (localData != null) return JSON.parse(localData)
            if ( typeof initialValue === 'function'){
                return initialValue()
            }else{
                return initialValue
            }
        }
    )
    
    useEffect(
        () => {
            localStorage.setItem(preFixedKey,JSON.stringify(value))
        },[preFixedKey,value]
    )    
    
    return [value,setValue]
}

export default useLocalStorage;

it is a custom hook and I have defined the value of key and initialValue later — SAYAN
– SAYAN, Commented Oct 14, 2020 at 17:09
That's not how you use useState . Instead you want to separate it into another useEffect (with []) deps, and then setValue(initialValue), now you can't store functions in localStorage, or I mean it's theoretically possible to stringify a function but it's just not the right way to go about things. In fact JSON.stringify() will remove functions since functions are not part of JSON. There already exists useLocalStorage solutions that work if you want to use them. — George
– George, Commented Oct 14, 2020 at 17:11
sorry i thought you were trying to save function into localStorage. even so, it looks wrong. — George
– George, Commented Oct 14, 2020 at 18:23

Prateek Thapa · Accepted Answer · 2020-10-14 17:13:02Z

1

TYPO

should be preFixedKey instead of preFixedkey

 const localData = localStorage.getItem(preFixedKey)

inside the useState

answered Oct 14, 2020 at 17:13

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

React Javascript value showing undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related