Как добавить стрелку к элементам меню, которые имеют детей?

Question

Я пытаюсь добавить стрелку FontAwesome рядом с каждым элементом в моем меню, у которого есть дочерние элементы (т. Е. Я хочу указать, что вы можете щелкнуть элемент, чтобы отобразить больше данных в этой категории).Меню заполнено данными json из API, и поскольку в нем много вложенных объектов, я решил использовать рекурсию, чтобы он работал.Но теперь у меня возникают проблемы с добавлением стрелки только к элементам, которые содержат больше данных, вместо каждого отдельного элемента в меню.

Кто-нибудь имеет представление о том, как я мог бы изменить его, чтобы только стрелкапоявляется рядом с элементами, которые нуждаются в этом?См. Ниже для изображения

class Menu extends React.Component {
  state = {
    devices: [],
    objectKey: null,
    tempKey: []
  };

Это то место, где я сейчас добавляю стрелку ...

  createMenuLevels = level => {
    const { objectKey } = this.state;
    const levelKeys = Object.entries(level).map(([key, value]) => {
      return (
        <ul key={key}>
          <div onClick={() => this.handleDisplayNextLevel(key)}>{key} <FontAwesome name="angle-right"/> </div>
          {objectKey[key] && this.createMenuLevels(value)}
        </ul>
      );
    });
    return <div>{levelKeys}</div>;
  };

  handleDisplayNextLevel = key => {
    this.setState(prevState => ({
      objectKey: {
        ...prevState.objectKey,
        [key]: !this.state.objectKey[key]
      }
    }));
  };

  initializeTK = level => {
    Object.entries(level).map(([key, value]) => {
      const newTemp = this.state.tempKey;
      newTemp.push(key);
      this.setState({ tempKey: newTemp });
      this.initializeTK(value);
    });
  };

  initializeOK = () => {
    const { tempKey } = this.state;
    let tempObject = {};
    tempKey.forEach(tempKey => {
      tempObject[tempKey] = true;
    });

    this.setState({ objectKey: tempObject });
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ devices: response.data });
    });
    const { devices } = this.state;
    this.initializeTK(devices);
    this.initializeOK();
    this.setState({ devices });
  }

  render() {
    const { devices } = this.state;
    return <div>{this.createMenuLevels(devices)}</div>;
  }
}

Вот как это выглядит на данный момент, но я бы хотелпоэтому такие предметы, как галстук и зонтик, не имеют стрелок, поскольку в этих элементах больше нет данных для отображения

Answer 1

Вы можете проверить в цикле карты из createMenuLevels, является ли значение пустым или нет, и построить div на основе этой информации.

createMenuLevels = level => {
const { objectKey } = this.state;
const levelKeys = Object.entries(level).map(([key, value]) => {
//check here if childs are included:
var arrow = value ? "<FontAwesome name='angle-right'/>" : "";
return (
    <ul key={key}>
      <div onClick={() => this.handleDisplayNextLevel(key)}>{key} {arrow} </div>
      {objectKey[key] && this.createMenuLevels(value)}
    </ul>
  );
});
return <div>{levelKeys}</div>;
};

Вместо того, чтобы просто проверять, установлено ли значение, вы можете проверитьэто массив с: Array.isArray(value)