JSFiddle - React, Tailwind, and code Playground

JavaScript

var list = [
	    {"id": 1, "parentId": null, "text": "Первая строка"}, 
	    {"id": 2, "parentId": 3,    "text": "Вторая строка"}, 
	    {"id": 3, "parentId": 1,    "text": "Третья строка"},
	    {"id": 4, "parentId": 1,    "text": "Четвёртая строка"},
	    {"id": 5, "parentId": null, "text": "Пятая строка"}, 
	    {"id": 6, "parentId": 5,    "text": "Шестая строка"}, 
	    {"id": 7, "parentId": 6,    "text": "Седьмая строка"}, 
	    {"id": 8, "parentId": 5,    "text": "Восьмая строка"}
	];
  
  function addDepth(node) {
		node.depth = depth;
		return node;
	}

	var depth = 0;
	var stack = list
		.filter(node => node.parentId === null)
		.map(addDepth)
	;

	while (stack.length) {
		var current = stack.pop();
		visit(current);

		// Нужно обнулить счётчик глубины, когда опять встречаем корень
		if (current.parentId === null) {
			depth = 0;
		}

		var children = list.filter(node => node.parentId === current.id);

		if (children.length) {
			depth++;
			childrenWithDepth = children.map(addDepth)
			stack = stack.concat(childrenWithDepth);
		}
	}

	function visit(node) {
		console.log('-'.repeat(node.depth) + node.id);
	}