Working with state on recursive components-CodePudding

I'm writing a component that renders itself inside recursively and is data-driven

Attaching my

This is my App.js:

import { useState } from "react";
import "./App.css";
import Group from "./components/group";
import builderStructureData from "./components/builderStructureData";

function App() {
  const [builderStructure, setBuilderStructure] = useState(
    builderStructureData
  );

  return (
    <div className="App">
      {builderStructure.map((x) => {
        return <Group key={x.id} children={x.children} value={x.value} />;
      })}
    </div>
  );
}

export default App;

And this is my recursive component:

import React from "react";

export default function Group(props) {
  let childrenArray = [];
  if (props.children) {
    props.children.map((x) => childrenArray.push(x));
  }

  return (
    <div className="group" draggable>
      <p>this is value: </p>
      <input value={props.value} readOnly={true}></input>
      <button>Add Group</button>

      {childrenArray.map((x) => {
        return <Group key={x.id} children={x.children} value={x.value} />;
      })}
    </div>
  );
}

I can render the components based on the data, and it seems to be handling recursion fine. I need to store the state on the App.js page and be able to change it from within child components. For example, if I update the "value" field of the component with ID = 342342, I want it to update that corresponding object in the state no matter how deeply nested it is, but not sure how to do that as it is not as simple as just passing a prop.

Am I taking the right approach with my code snippet? How can I do the state update?

CodePudding user response：

I would advise the state normalization approach - here is an example for redux state - https://redux.js.org/usage/structuring-reducers/normalizing-state-shape - but you can use this approach with your state. So - your state will look like this:

state = {
  items: {
    [123]: {
      id: 123,
      value: 3,
      childrenIds: []
    },
    [345]: {
      id: 345,
      value: 5,
      childrenIds: [4123, 340235]
    },
    [4123]: {
      id: 4123,
      value: 34,
      parentId: 345,
      childrenIds: [342342]
    },
    [342342]: {
      id: 342342,
      value: 33,
      parentId: 4123,
      childrenIds: []
    },
    [340235]: {
      id: 340235,
      value: 3431,
      parentId: 345,
      childrenIds: [342231342]
    },
    [342231342]: {
      id: 342231342,
      value: 3415,
      parentId: 340235
      childrenIds: []
    }
  }
}

Here the field "childrenIds" is an optional denormalization for ease of use, if you want - you can do without this field. With this approach, there will be no problem updating the state.

CodePudding user response：

You are thinking this in a wrong way, it should be very easy to do what you want.

The most imported thing is to make a little small changes in Group Please have a look

import React from "react";

export default function Group(props) {
  const [item, setItem] = React.useState(props.item);
  let childrenArray = [];
  if (item.children) {
    item.children.map((x) => childrenArray.push(x));
  }
  
  const updateValue = ()=> {
      // this will update the value of the current object 
      // no matter how deep its recrusive is and the update will also happen in APP.js
      // now you should also use datacontext in app.js togather with state if you want to 
      // trigger somethings in app.js
      item.value =props.item.value= 15254525;
      setState({...item}) // update the state now 
  }

  return (
    <div className="group" draggable>
      <p>this is value: </p>
      <input value={item.value} readOnly={true}></input>
      <button>Add Group</button>

      {childrenArray.map((x) => {
        return <Group item={x} />;
      })}
    </div>
  );
}

The code above should make you understand how easy it is to think about this as an object instead of keys.

Hop this should make it easy for you to understand