CODEWITHSUNDEEP
javascriptreactjs
Adam Princiotta
Adam Princiotta

Reputation: 27

Variable in array undefined when trying to use it in an array, but is defined when console logging

I am trying to add dropdown items and handle the click based on the string value of the dropdown item. When I do console.log(props.storedSections[x]), it logs the correct value for the string. However when I try to use it to store the string in to check in handleSectionClick, it is just left as undefined and I have tried wrapping it in {}, {}, and ${}, but none of it works as I intend it to. Any ideas? Also it is a useState variable that is passed down from a parent component but that shouldn't matter since it displays properly when console logged.

here is the declaration of the sections useState object

    const [sections, setSections] = useState([<Dropdown.Item onClick={()=>handleSectionClick("Work")}>Work</Dropdown.Item>])

Here is the useEffect function I am using to take the sections variable and add extra items to it using the strings stored in the storedSections useState variable

useEffect(() =>{
        //gets the new list without the Add New object
        let newSectionList = [...sections.slice(0, sections.length-1)]
        for(var x = 0; x < props.storedSections.length; x++){
            if(sections.indexOf(props.storedSections[x]) == -1)
            //adds the new object that they want to add
            newSectionList.push(<Dropdown.Item onClick={()=>handleSectionClick(props.storedSections[x])}>{props.storedSections[x]}</Dropdown.Item>)
        }
        
        //then adds in the Add new object again
        newSectionList.push(<Dropdown.Item onClick={()=>handleSectionClick("Add New")}>Add New</Dropdown.Item>)
        
        setSections[newSectionList]
        setNewSectionTest(newSectionList)
    }, [])

Here is the code for handleSectionClick. If I console log the values here they are undefined.

    function handleSectionClick(item) {
    //if they select the Add New section from the dropdown then bring up the option to type a new one
    if (item === "Add New") {
        setNewSection(true)
      }
      //updates the header for the dropdown and keeps track of which section should be saved for the task
      else{
        setCurrentSection(item)
      }
  }

In my App.jsx I declare the storedSections like this

const [storedSections, setStoredSections] = useState(['test1', 'test2'])

The main goal of what I am trying to do is to take a dropdown menu with preset items in it, give the user the ability to add their own custom options to the dropdown menu and have the new values persist on a rerender. I plan to move this to a more complicated format including a database that stores each users custom dropdowns, but for now I am just confused why the value is stored properly and is console logged properly but when I try to use it in the declaration of the Dropdown Item, it reads as undefined.

Upvotes: 0

Views: 54

Answers (1)

Rajnikant
Rajnikant

Reputation: 2236

one very obvious problem is var x = 0 in for loop, try changing it to let x = 0; as in below code, and also add dependent props in useEffect dependency array

e.g. useEffect(() => {}, []) here in [] add props.storedSections and sections if it is also coming from props, also handleSectionClick if is hooks returned function

useEffect(() =>{
    //gets the new list without the Add New object
    let newSectionList = [...sections.slice(0, sections.length-1)]
    for(let x = 0; x < props.storedSections.length; x++){
        if(sections.indexOf(props.storedSections[x]) == -1)
        //adds the new object that they want to add
        newSectionList.push(<Dropdown.Item onClick={()=>handleSectionClick(props.storedSections[x])}>{props.storedSections[x]}</Dropdown.Item>)
    }
    
    //then adds in the Add new object again
    newSectionList.push(<Dropdown.Item onClick={()=>handleSectionClick("Add New")}>Add New</Dropdown.Item>)
    
    setSections[newSectionList]
    setNewSectionTest(newSectionList)
}, [props.storedSections, sections])

Upvotes: 1

Related Questions