src/components/views/search/rocksNNResults/RocksNNResults.tsx

import { forwardRef, useState } from "react";
import { RocksNNResultsProps } from "./RocksNNResultsProps";
import "./RocksNNResults.scss";

export const RocksNNResults = forwardRef<HTMLDivElement, RocksNNResultsProps>(({ rocksNN, index }, ref) => {
  const [opened, setOpened] = useState<boolean>(false);

  return (
    <div className="search_result_item" ref={ref}>
      <div className="document">
        <p className="link_button">
          {index + 1}. {rocksNN.division}
        </p>
      </div>
      {opened && (
        <div className="rocks_nn" style={{ marginLeft: "10px" }}>
          {rocksNN.company_name.map((company, index) => {
            return <div key={company + index}>{company}</div>;
          })}
        </div>
      )}
      <div className="actions">
        <button className="link_button" onClick={() => setOpened(!opened)}>
          {opened ? "Свернуть состав" : "Развернуть состав"}
        </button>
      </div>
    </div>
  );
});