Question 383634 in Html Question posted in
Some basic documentation can be found here.

Html – How to programmatically generate a collapsible menu with react

I am making a page for a react application that receives data and generates menus from that data. Each request received has data on an arbitrary number of ‘systems’ and I would like to generate a collapsible menu for each. Apologies if this kind of question has been asked before, I searched google but couldn’t find anything.

Obviously the traditional solution of a collapsible menu in react is to create a variable to store the state and to use that to toggle the menu’s visibility, but I cannot do that as I have an arbitrary number of menus. I tried setting up a dictionary of booleans to keep track of the state for each:

function Systems(props) {
  const states = {};

  return (
    <div className={styles.formContainer}>
      <p className={styles.formContainerLabel}>{props.type.toUpperCase()}</p>
      {Object.keys(System_Definitions[props.type]).map((key) => {
        const system = System_Definitions[props.type][key];
        states[key] = false;
        function toggleMenu() {states[key] = !states[key];}

        return (
          <div className={styles.formContainer}>
            <p className={styles.formContainerLabel} onClick={toggleMenu}>
              {key.toUpperCase() + ' - ' + system.label.toUpperCase()}</p>
            <div id={key} className={states[key] ? '' : styles.formContainerContentHidden}>
              <TextInput label={'Life'} name={'life'} placeholder={system.life} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

But that did not work as react is not keeping track of the states so it does not update the boolean on click, and never opens the menus, which is what I have observed. I also tried adding a tag to add an event listener to the element to toggle the content:

function Systems(props) {
  return (
    <div className={styles.formContainer}>
      <p className={styles.formContainerLabel}>{props.type.toUpperCase()}</p>
      {Object.keys(System_Definitions[props.type]).map((key) => {
        const system = System_Definitions[props.type][key];

        return (
          <div className={styles.formContainer}>
            <p id={key + 'button'} className={styles.formContainerLabel}>
              {key.toUpperCase() + ' - ' + system.label.toUpperCase()}</p>
            <div id={key + 'content'} className={styles.formContainerContentHidden}>
              <TextInput label={'Life'} name={'life'} placeholder={system.life} />
            </div>
            <script>
              document.getElementByID({key} + 'button').addEventListener('click', () => {
                document.getElementById(key + 'content').className = ''
              })
            </script>
          </div>
        );
      })}
    </div>
  );
}

But I get a runtime error: ‘Cannot set properties of null (setting ‘className’)’, which I do not understand, since this script should not be executing until the elements have been loaded, since it is after the elements in question. Any help is appreciated!

Tags:

2

Answers


  1. 0

    The code you’ve given is incomplete, but here is the gist of what I am suggesting. Each FormContainer manages it’s own open/closed state. I’m sure the props I’m passing are incomplete so I doubt it will work without some modification.

    function FormContainer({system}) {
  const[ open, setOpen] = useState(false)
  return (
    <div className={styles.formContainer}>
      <p className={styles.formContainerLabel} onClick={()=> setOpen((prev)=> !prev )}>
        {key.toUpperCase() + " - " + system.label.toUpperCase()}
      </p>
      <div
        id={key}
        className={open ? "" : styles.formContainerContentHidden}
      >
        <TextInput label={"Life"} name={"life"} placeholder={system.life} />
      </div>
    </div>
  );
}

function Systems(props) {
  

  return (
    <div className={styles.formContainer}>
      <p className={styles.formContainerLabel}>{props.type.toUpperCase()}</p>
      {Object.keys(System_Definitions[props.type]).map((key) => {
 const system = System_Definitions[props.type][key];
         return (
          <FormContainer key={key} system={system}/>
        );
      })}
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Whenever you have a variable that affects how React is supposed to render the Component, you will want to use the useState() hook to create that piece of State. This is one of the fundamental ideas of React, and how React knows when to re-render a Component (only if State/props changes).

    You also seem to be trying to mix vanilla javascript event listeners, rather than using inline JSX event handlers.

    You also don’t seem to be adding key props to rendered list items, which React uses to help render lists and keep track of their State if State is involved.

    You also seem to be using CSS to hide elements rather than doing conditional JSX rendering.

    I would research useState() hook, conditional rendering in React, and the React key property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search