Итерация по вложенным объектам

Question

Я создаю приложение React и у меня следующий список:

const list = [
    {
        id: '1',
        task: 'task 1',
        activities: [{
            'Google': [
                {url: 'https://www.google.com'},
                {visited: false}
            ],
            'Yahoo': [
                {url: 'https://www.yahoo.com'},
                {visited: false}
            ],
            'Bing': [
                {url: 'https://www.bing.com'},
                {visited: false}
            ]
        }],
        visitedAll: false
    },
    {
        id: '2',
        task: 'task 2',
        activities: [{
            'Facebook': [
                {url: 'https://www.facebook.com'},
                {visited: false}
            ],
            'Instagram': [
                {url: 'https://www.instagram.com'},
                {visited: false}
            ],
            'Twitter': [
                {url: 'https://www.twitter.com'},
                {visited: false}
            ]
        }],
        visitedAll: false
    }
];

Я перебираю список следующим образом:

<ul>
    {list.map(item => (
        <li key={item.id}>
           {item.task}
           <ul>
               {Object.keys(item.activities[0]).map((act, i) => <li key={i}>{act}</li>)}
           </ul>
        </li>
    ))}
</ul>

, который выдаст следующий вывод:

• задача 1
  • Google
  • Yahoo
  • Bing
• задача 2
  • Facebook
  • Instagram
  • Twitter

1. Как обернуть элементы списка подменю соответствующими якорями?
2. Как добавить событие onClick, которое установит для клавиши visited значение true для каждого элемента?

Answer 1

Я бы реализовал компонент Anchor, который сохранит состояние visited.

Кроме того, родительский компонент App будет иметь состояние "всех посещенных якорей".

Пример:

const list = [
  {
    id: '1',
    task: 'task 1',
    activities: {
      Google: {
        url: 'https://www.google.com'
      },
      Yahoo: {
        url: 'https://www.yahoo.com'
      },
      Bing: {
        url: 'https://www.bing.com'
      }
    }
  },
  {
    id: '2',
    task: 'task 2',
    activities: {
      Facebook: {
        url: 'https://www.facebook.com'
      },
      Instagram: {
        url: 'https://www.instagram.com'
      },
      Twitter: {
        url: 'https://www.twitter.com'
      }
    }
  }
];

const Anchor = ({ name, href, onClick }) => {
  const [isVisited, setIsVisited] = useState(false);
  const onAnchorClick = () => {
    setIsVisited(visited => !visited);
    onClick();
  };
  return (
    // v add href={href}
    <a onClick={onAnchorClick}>{`${name} is ${
      isVisited ? '' : 'not'
    } visited`}</a>
  );
};

// You can get such object from reducing the list
const visitedInitial = {
  Google: false,
  Yahoo: false,
  Bing: false,
  Facebook: false,
  Instagram: false,
  Twitter: false
};

const App = () => {
  const [visited, setVisited] = useState(visitedInitial);

  return (
    <>
      <h1>
        {Object.values(visited).every(value => value === true)
          ? 'All Visited'
          : 'Please visit all'}
      </h1>
      <ul>
        {list.map(({ id, task, activities }) => (
          <li key={id}>
            {task}
            <ul>
              {Object.entries(activities).map(([name, { url }], i) => (
                <li key={i}>
                  <Anchor
                    name={name}
                    href={url}
                    target="_blank"
                    onClick={() =>
                      setVisited(prev => ({ ...prev, [name]: true }))
                    }
                  />
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </>
  );
};

Answer 2

Вот ответ на основе предоставленных вами предметов. Я извлек подпункты рисования в отдельную функцию, которая принимает аргумент элемента. Каждый подпункт имеет обработчик onClick, который устанавливает visited в true.

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

const initialItems = [
  {
    id: "1",
    task: "task 1",
    activities: [
      {
        Google: [{ url: "https://www.google.com" }, { visited: false }],
        Yahoo: [{ url: "https://www.yahoo.com" }, { visited: false }],
        Bing: [{ url: "https://www.bing.com" }, { visited: false }]
      }
    ]
  },
  {
    id: "2",
    task: "task 2",
    activities: [
      {
        Facebook: [{ url: "https://www.facebook.com" }, { visited: false }],
        Instagram: [{ url: "https://www.instagram.com" }, { visited: false }],
        Twitter: [{ url: "https://www.twitter.com" }, { visited: false }]
      }
    ]
  }
];

function App() {
  const [items, setItems] = useState(initialItems);

  const setVisited = React.useCallback(
    (id, activityName) => {
      const item = items.find(item => item.id === id);

      if (item) {
        item.activities[0][activityName][1].visited = true;
        setItems([...items]);
      }
    },
    [items, setItems]
  );

  const getSubItems = useCallback(
    item => {
      const activities = item.activities[0];

      return Object.keys(activities).map(activityName => {
        const url = activities[activityName][0].url;
        const onClick = () => {
          setVisited(item.id, activityName);
        };

        return (
          <li key={activityName}>
            <a
              href={url}
              onClick={onClick}
              target="_blank"
              rel="noopener noreferrer"
            >
              {activityName}
            </a>
          </li>
        );
      });
    },
    [setVisited]
  );

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.task}
            <ul>{getSubItems(item)}</ul>
          </li>
        ))}
      </ul>
    </div>
  );
}

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

ПРИМЕР

Answer 3

Сначала вы можете изменить свойство activities на один объект, используя метод reduce, а затем создать отдельный компонент для подэлементов, каждый из которых содержит состояние со свойством visited.

const {useState} = React;

const list = [{"id":"1","task":"task 1","activities":[{"Google":[{"url":"https://www.google.com"},{"visited":false}],"Yahoo":[{"url":"https://www.yahoo.com"},{"visited":false}],"Bing":[{"url":"https://www.bing.com"},{"visited":false}]}],"visitedAll":false},{"id":"2","task":"task 2","activities":[{"Facebook":[{"url":"https://www.facebook.com"},{"visited":false}],"Instagram":[{"url":"https://www.instagram.com"},{"visited":false}],"Twitter":[{"url":"https://www.twitter.com"},{"visited":false}]}],"visitedAll":false}]
.map(({activities, ...rest}) => ({
  ...rest, activities: activities.reduce((r, e) => Object.assign(r, e), {})
}))

const SubListItem = props => {
  const {data, name} = props;
  const [visited, setVisited] = useState(data[1].visited);
  
  const toggle = event => {
    event.preventDefault();
    setVisited(!visited);
  }
  
  return <li>
    <a style={{color: visited ? "green" : ''}}
    onClick={toggle} 
    href={data[0].url}>{name}</a>
  </li>
}

const List = ({data}) => <ul>
  {data.map(item => <li key={item.id}>
    <a href="">{item.task}</a>
    <ul>{Object.keys(item.activities).map(act => (
      <SubListItem key={act} name={act} data={item.activities[act]} />
    ))}</ul>
  </li>)}
</ul>

ReactDOM.render(<List data={list} />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

<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="app"></div>