React Onclick display parent array

Question

I am working on this React problem in which I want to display parent array from child array. For example, I have the Back Button and array Button

text: [ 
 title:"A1"
  list: [
 title: "A2"
  list: [ title: "A3"]
 title: "A2"
   ],
 title: "B1"
  list: [ title: "B2"],
 title: "C1"
  list: [ title: "C2"],
]

displayed as

Back Button
A1
B1
C1

and if a person clicks on "A1", it is displayed as

Back Button
A2
A2

if a person clicks on button,it should display the parent array like (I need to display this)

Back Button
A1
B1
C1

My_Code anyone know how to do this?

Drew Reese · Accepted Answer · 2021-07-20 08:17:44Z

You can maintain a simple stack of array elements you've clicked into, initialized to the root level's list array.

const [menuStack, setStack] = React.useState([data.list]);

const pushState = (list) => {
  list && setStack((stack) => [...stack, list]);
};
const popState = () => {
  menuStack.length > 1 && setStack((stack) => stack.slice(0, -1));
};

const top = menuStack[menuStack.length - 1];

If each level of depth has a list property then render a button or interactable element and push the new list onto the stack. Clicking the back button pops the last added list.

const data = {
  list: [
    {
      id: 0,
      title: "A1",
      list: [
        {
          id: 3,
          title: "A2",
          list: [
            {
              id: 7,
              title: "A3"
            }
          ]
        },
        {
          id: 4,
          title: "A2"
        }
      ]
    },
    {
      id: 1,
      title: "B1",
      list: [
        {
          id: 5,
          title: "B2"
        }
      ]
    },
    {
      id: 2,
      title: "C1",
      list: [
        {
          id: 6,
          title: "C2"
        }
      ]
    }
  ]
};

function App() {
  const [menuStack, setStack] = React.useState([data.list]);

  const pushState = (list) => {
    list && setStack((stack) => [...stack, list]);
  };
  const popState = () => {
    menuStack.length > 1 && setStack((stack) => stack.slice(0, -1));
  };

  const top = menuStack[menuStack.length - 1];

  return (
    <div className="App">
      <button onClick={popState}>Back</button>
      {top.map(({ id, title, list }) => (
        <div key={id}>
          {list ? (
            <button onClick={() => pushState(list)}>{title}</button>
          ) : (
            <div>{title}</div>
          )}
        </div>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />

@Sindhu If you're seeing this error with the code I've suggested then I think you may have not implemented it correctly since the code runs here in the stack snippet. Can you update your question to include the error and stacktrace if available?

Collectives™ on Stack Overflow

React Onclick display parent array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related