[riaron86]

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import css from './css/main.css';
import App from './App.js';
const root=ReactDOM.createRoot( document.getElementById('root'));
root.render(
    <div style={css}>
        <App/>
    </div>
);

App.js

import React,{createContext} from 'react';
import Navbar from "./components/Navbar";
import LeftMenu from "./components/LeftMenu";
import {AuthContext} from './context';

function App() {
    const prop = [];
    const polzunok=[];
    const checkboxi=[];
    polzunok.push(
         {
            id: 1,
            name: "Цена",
            start1: 2000,
            start2: 7000,
            minr: 0,
            maxr: 10000,
        },
    );
    checkboxi.push(
        {id:1,mname:'os',named:'Андроид',phdr:'Операционная Система'},
        {id:2,mname:'os',named:'Айос',phdr:'Операционная Система'},
        {id:3,mname:'os',named:'Виндоус',phdr:'Операционная Система'},
        {id:4,mname:'ram',named:'2Гб',phdr:'Оперативная Память'},
        {id:5,mname:'ram',named:'4Гб',phdr:'Оперативная Память'},
        {id:6,mname:'ram',named:'6Гб',phdr:'Оперативная Память'},
        {id:7,mname:'ram',named:'8Гб',phdr:'Оперативная Память'},
        {id:8,mname:'ram',named:'12Гб',phdr:'Оперативная Память'},
        {id:9,mname:'rom',named:'32Гб',phdr:'Память'},
        {id:10,mname:'rom',named:'64Гб',phdr:'Память'},
        {id:11,mname:'rom',named:'128Гб',phdr:'Память'},
        {id:12,mname:'rom',named:'256Гб',phdr:'Память'},
        {id:13,mname:'diagonal',named:'5.8',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.2',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.4',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.6',phdr:'Диагональ'},
        {id:13,mname:'dpi',named:'1280 × 720',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'1920 × 1080',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'3840 × 2160',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'7680 × 4320',phdr:'Разрешение'},
        {id:13,mname:'dsim',named:'2x SIM',phdr:'Количество Сим Карт'},
        {id:13,mname:'dsim',named:'1x SIM',phdr:'Количество Сим Карт'},
    )
    prop['polzunok']=polzunok;
    prop['checkboxi']=checkboxi;
  return (
    <div className="App">
        <AuthContext.Provider value={prop}>
            <Navbar/>
            <LeftMenu/>
        </AuthContext.Provider>

    </div>
  );
}

export default App;

/context/index.js

import {createContext} from 'react'

export const AuthContext = createContext(null);

/components/LeftMenu.js

import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
//import Polzunok from "./elements/Polzunok";
import Checkboxes from "./elements/Checkboxes";
function LeftMenu() {
    const propk=useContext(AuthContext);
    //console.log(propk);
    return (
        <div className="LeftMenu">
            <div className="polzun">
                    <Checkboxes props={propk.checkboxi}/>
            </div>


        </div>
    );
}

//
export default LeftMenu;

/components/elements/Checkboxes.js

import React from 'react';

function Checkboxes(check) {
const m=0;
const n='';
const f=[];
const d=[];
   Object.entries(check.props).forEach(([k, v])=>f[k]=v);
   console.log(f);

//console.log(f);


    return (
        <div>
            {}
        </div>
    );
}

export default Checkboxes;

нужно получить уникальные значения phdr и по ним группируя вывести в меню checkbox ы