Style items in deeply nested lists using React in a different way

Question

Style items in deeply nested lists using React in a different way

Working with react to render nested unordered lists from JSON files has been a challenge. I'm trying to find a way to display them with alternating background colors for each line, making the content easier to read.

1 (white)
2 (gray)
    3 (white)
        4 (gray)
        5 (white)
    6 (gray)
7 (white)

I attempted to achieve this using pure CSS but ran into issues with the nth-of-type() selector only checking the relative index. This resulted in an inconsistent color pattern as shown below:

1 (white)
2 (gray)
    1 (white)
        1 (white)
        2 (gray)
    2 (gray)
3 (white)

Next, I tried incorporating a counter in my recursive rendering function to determine the even and odd lines, but encountered further challenges:

1 (white)
2 (gray)
    4 (gray)
        6 (gray)
        7 (white)
    5 (white)
3 (white)

I understand that flattening the tree structure and utilizing a matching field to establish the even/odd sequence could be a solution, however, it seems inefficient both in terms of time and space.

javascript css reactjs

Answer 1

Answer №1

One way to achieve this task is by manipulating the DOM directly within a useEffect (or useLayoutEffect for synchronous calls) after rendering.

Below is a code snippet that assigns a ref to the list container and utilizes a useEffect with a state as a dependency to iterate over all child li elements, providing cleanup of the manipulations in the return callback.

 const ulContainerRef = React.useRef(null);

  React.useEffect(() => {
    const listItems = ulContainerRef.current.querySelectorAll('li');
    listItems.forEach((item, i) => {
      item.classList.add(i % 2 ? 'even' : 'odd');
    });

    return () => {
      listItems.forEach((item, i) => {
        item.classList.remove('even', 'odd');
      });
    }
  }, [data]);

var initData = [{ id: 1, title: 'Title 1', children: [{ id: 1.1, title: 'Title  1.1' }, { id: 1.2, title: 'Title 1.2' }] }, { id: 2, title: 'Title 2', children: [{ id: 2.1, title: 'Title 2.1' }] }, { id: 3, title: 'Title 3', children: [{ id: 3.1, title: 'Title 3.1' }, { id: 2.2, title: 'Title 3.2' }] }]

const App = () => {
  const [data, setData] = React.useState(initData);
  const ulContainerRef = React.useRef(null);

  React.useEffect(() => {
    const listItems = ulContainerRef.current.querySelectorAll('li');
    listItems.forEach((item, i) => {
      item.setAttribute('data-row', i);
      item.classList.add(i % 2 ? 'odd' : 'even');
    });

    return () => {
      listItems.forEach((item, i) => {
        item.classList.remove('odd', 'even');
      });
    }
  }, [data]);

  const alterData = () => {
    let i = 1;
    setData(prevData => (
      [...prevData.slice(0, i),
      {
        ...prevData[i],
        children: [...prevData[i].children,
        {
          id: +'2.' + (prevData[i].children.length + 1),
          title: 'Title 2.' + (prevData[i].children.length + 1)
        }
        ]
      },
      ...prevData.slice(i + 1)]
    ));
  }

  return (
    <div ref={ulContainerRef}>
      <Ul list={data} />
      <button type='button' onClick={alterData}>Alter Data</button>
    </div>
  )
}

const Ul = ({ list }) => {

  return (
    <ul>
      {list.length > 0 && list.map((item, i) => (
        <li key={item.id}>
          {item.title}
          {(item.hasOwnProperty('children') && item.children.length > 0) &&
            <Ul key={item.id + '_c'} list={item.children} />
          }
        </li>
      )
      )}
    </ul>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

body {
  font-family: monospace;
}

ul {
  list-style-type: none;
  width: 160px;
}

.odd::before {
  content: "(odd: " attr(data-row) ") ";
  background-color: gray;
}

.even::before {
  content: " (even: " attr(data-row) ") ";
  background-color: aquamarine;
}

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

Answer 2

One way to achieve this task is by manipulating the DOM directly within a useEffect (or useLayoutEffect for synchronous calls) after rendering.

Below is a code snippet that assigns a ref to the list container and utilizes a useEffect with a state as a dependency to iterate over all child li elements, providing cleanup of the manipulations in the return callback.

 const ulContainerRef = React.useRef(null);

  React.useEffect(() => {
    const listItems = ulContainerRef.current.querySelectorAll('li');
    listItems.forEach((item, i) => {
      item.classList.add(i % 2 ? 'even' : 'odd');
    });

    return () => {
      listItems.forEach((item, i) => {
        item.classList.remove('even', 'odd');
      });
    }
  }, [data]);

var initData = [{ id: 1, title: 'Title 1', children: [{ id: 1.1, title: 'Title  1.1' }, { id: 1.2, title: 'Title 1.2' }] }, { id: 2, title: 'Title 2', children: [{ id: 2.1, title: 'Title 2.1' }] }, { id: 3, title: 'Title 3', children: [{ id: 3.1, title: 'Title 3.1' }, { id: 2.2, title: 'Title 3.2' }] }]

const App = () => {
  const [data, setData] = React.useState(initData);
  const ulContainerRef = React.useRef(null);

  React.useEffect(() => {
    const listItems = ulContainerRef.current.querySelectorAll('li');
    listItems.forEach((item, i) => {
      item.setAttribute('data-row', i);
      item.classList.add(i % 2 ? 'odd' : 'even');
    });

    return () => {
      listItems.forEach((item, i) => {
        item.classList.remove('odd', 'even');
      });
    }
  }, [data]);

  const alterData = () => {
    let i = 1;
    setData(prevData => (
      [...prevData.slice(0, i),
      {
        ...prevData[i],
        children: [...prevData[i].children,
        {
          id: +'2.' + (prevData[i].children.length + 1),
          title: 'Title 2.' + (prevData[i].children.length + 1)
        }
        ]
      },
      ...prevData.slice(i + 1)]
    ));
  }

  return (
    <div ref={ulContainerRef}>
      <Ul list={data} />
      <button type='button' onClick={alterData}>Alter Data</button>
    </div>
  )
}

const Ul = ({ list }) => {

  return (
    <ul>
      {list.length > 0 && list.map((item, i) => (
        <li key={item.id}>
          {item.title}
          {(item.hasOwnProperty('children') && item.children.length > 0) &&
            <Ul key={item.id + '_c'} list={item.children} />
          }
        </li>
      )
      )}
    </ul>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

body {
  font-family: monospace;
}

ul {
  list-style-type: none;
  width: 160px;
}

.odd::before {
  content: "(odd: " attr(data-row) ") ";
  background-color: gray;
}

.even::before {
  content: " (even: " attr(data-row) ") ";
  background-color: aquamarine;
}

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

Answer 3

Answer №2

This method involves tallying all previous sibling branches (along with their nested children) for each item displayed by the tree. While it allows for a direct mapping of your data structure without flattening it, the performance drawbacks may hinder its practicality in real-world scenarios if the tree is extensive and deeply nested.

The effectiveness of this approach largely hinges on how frequently your `data` undergoes updates. For a static navigation menu where content remains constant post-initial load, encapsulating the code within a memoized component should suffice. However, if the data is subject to frequent modifications, I recommend restructuring the data and caching the computation for more efficiency instead of recalculating during each render cycle as done in this approach.

It's worth noting that this issue isn't related to asynchronous programming. It's not feasible to use `await` mid-way through a `map` call – the data either exists in the mapped array or it doesn't.

const data = [
  {
    name: "Level 1-1"
  },
  {
    name: "Level 1-2",
    children: [
      {
        name: "Level 2-1",
        children: [
          {
            name: "Level 3-1"
          },
          {
            name: "Level 3-2"
          }
        ]
      },
      {
        name: "Level 2-2"
      }
    ]
  },
  {
    name: "Level 1-3"
  }
];

const getSibCount = (itemArr, count = 0) => {
  itemArr.forEach((item) => {
    count += 1;
    item.children && (count += getSibCount(item.children));
  });
  return count;
};

const getClass = (count) => (count % 2 === 1 ? "grey" : "white");

function Tree({ data, count, depth }) {
  return (
    <ul>
      {data.map((item, i, arr) => {
        const newCount = count + getSibCount(arr.slice(0, i));

        return item.children ? (
          <li key={item.name}>
            <p style={{paddingLeft: `${depth*15}px`}} className={getClass(newCount)}>
              {newCount} {item.name}
            </p>
            <Tree data={item.children} count={newCount+1} depth={depth+1} />
          </li>
        ) : (
          <li style={{paddingLeft: `${depth*15}px`}} className={getClass(newCount)} key={item.name}>
            {newCount} {item.name}
          </li>
        );
      })}
    </ul>
  );
}

ReactDOM.render(
  <Tree data={data} count={0} depth={0} />,
  document.getElementById('root')
);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}

.grey {
  background: grey;
}

.white {
  background: cornsilk;
}

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

Answer 4

This method involves tallying all previous sibling branches (along with their nested children) for each item displayed by the tree. While it allows for a direct mapping of your data structure without flattening it, the performance drawbacks may hinder its practicality in real-world scenarios if the tree is extensive and deeply nested.

The effectiveness of this approach largely hinges on how frequently your `data` undergoes updates. For a static navigation menu where content remains constant post-initial load, encapsulating the code within a memoized component should suffice. However, if the data is subject to frequent modifications, I recommend restructuring the data and caching the computation for more efficiency instead of recalculating during each render cycle as done in this approach.

It's worth noting that this issue isn't related to asynchronous programming. It's not feasible to use `await` mid-way through a `map` call – the data either exists in the mapped array or it doesn't.

const data = [
  {
    name: "Level 1-1"
  },
  {
    name: "Level 1-2",
    children: [
      {
        name: "Level 2-1",
        children: [
          {
            name: "Level 3-1"
          },
          {
            name: "Level 3-2"
          }
        ]
      },
      {
        name: "Level 2-2"
      }
    ]
  },
  {
    name: "Level 1-3"
  }
];

const getSibCount = (itemArr, count = 0) => {
  itemArr.forEach((item) => {
    count += 1;
    item.children && (count += getSibCount(item.children));
  });
  return count;
};

const getClass = (count) => (count % 2 === 1 ? "grey" : "white");

function Tree({ data, count, depth }) {
  return (
    <ul>
      {data.map((item, i, arr) => {
        const newCount = count + getSibCount(arr.slice(0, i));

        return item.children ? (
          <li key={item.name}>
            <p style={{paddingLeft: `${depth*15}px`}} className={getClass(newCount)}>
              {newCount} {item.name}
            </p>
            <Tree data={item.children} count={newCount+1} depth={depth+1} />
          </li>
        ) : (
          <li style={{paddingLeft: `${depth*15}px`}} className={getClass(newCount)} key={item.name}>
            {newCount} {item.name}
          </li>
        );
      })}
    </ul>
  );
}

ReactDOM.render(
  <Tree data={data} count={0} depth={0} />,
  document.getElementById('root')
);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}

.grey {
  background: grey;
}

.white {
  background: cornsilk;
}

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

Style items in deeply nested lists using React in a different way

Answer №1

Answer №2

Similar questions

Is it possible to incorporate regular React JSX with Material UI, or is it necessary to utilize TypeScript in this scenario?

RxJS emits an array of strings with a one second interval between each emission

Attribution of image in footer

Ways to retrieve form data following a post request using JavaScript

Auto adjusting textarea height as per content length

Nested functions with async-await syntax

What methods can be used to prevent the appearance of the ActiveX warning in IE7 and IE8 when dealing with drop

Exploring Objects using the for-in loop in ReactJS

The CSS property :read-only is used on elements that do not have the readonly attribute

The returned error object from express does not include the error message

Exploring Specific Locations with AmCharts 5 Zoom Feature

Facing an error when refreshing a page in NextJS while using p5.js

When utilizing Vue JS, each key value of one computed property can trigger another computed property to run

Incorporating ES6 (ECMAScript 2015) modules: bringing in index.js

Creating a property based on the given values of a different property

Function in JQuery `each`

modify rectangular section in drupal rather than numerical block

Struggling to get Vuetify tabs to work alongside masonry.js, any solutions available?

Explore RxJs DistinctUntilChanged for Deep Object Comparison

Accessing Elements by Class Name