0

I'm trying to make an event menager in React and I have a problem with one feature:

There is an Apply button in a pop up dialog window (DialogWindow.js) component:

       

 <Button 
            onClick={()=>{
                const temp = makeAnEvent()  //function gaining all dialog inputs into one object
                localStorage.setItem("Event_"+temp.key, JSON.stringify(temp))
                handleClose() //function closing a dialog
                clearDialog() // fucntion clearing inputs
            }}
        >
            Apply
        </Button>

And here is a state and a function I use in a Parent (App.js) component:

    const [events,setEvents] = useState(Object.values(localStorage))
    
    const updateEvents = () => {
        setEvents(Object.values(localStorage))
        console.log("Events Updated!")
    }

Also I have a component MakeAnEventHMTML(object) building an html from given event object. I use it within the App.js to view all events:

{events.map((element)=>(MakeAnEventHTML(JSON.parse(element))))}

When I hit the Apply button, all the content in my browser vanishes and I get this stack of errors in a console:

1 : React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks

2: Uncaught Error: Rendered more hooks than during the previous render

3: The above error occurred in the component

4: Uncaught Error: Rendered more hooks than during the previous render

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Paprycz
  • 9
  • 1

1 Answers1

0

You likely need to bring the useState instantiation higher up in the component. If you have conditional render statements above it, this error will occur.

tuckermassad
  • 126
  • 4
  • Thanks, I'll check it out. For now I could handle it by mapping the evebt using MakeAnEventHTML as an React component instead of a function. – Paprycz Oct 01 '22 at 00:27