react.js не работает рекурсивка

[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 ы

[Nexus]

В вашем index.js вы импортируете css-файл и вставляете его содержимое как значение атрибута style дива. Работает?

В вашем App.js вы каждый раз пересоздаете массив данных для контекста, может стоит вынести эти данные из компонента или вообще использовать хук useReducer? Тут вообще непонятно зачем вам эти данные и что вы собираетесь с ними делать.
Там же: инициализировать константу prop с типом array для того, чтобы добавить ему 2 свойства - звучит как глупость. Может стоит использовать тип object?

LeftMenu.js: зачем читать значение контекста и прокидывать его значение дочернему компоненту, если дочерний компонент сам может обратиться к контексту?
Ключ props для props'ов компонента - звучит мощно.

Checkboxes.js: даже не представляю, что вы пытаетесь сделать.
Ваш check.props - уже массив, нет смысла для его перебора использовать Object.entries.


Попробуйте начать с изучения основ JavaScript, потом почитайте документацию React и через годик у вас все получится.
Пытаться решить задачу методом тыка - такое себе, этот топик прямое тому доказательство.

[riaron86]

изображения не показывает в чем ошибка?

Shop.js

import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
import Item from "./Item";
import shop from '../css/components/shop.css';

function Shop(props) {
    const propk=useContext(AuthContext);
    return (
        <div className="shop">
            {propk.products.map(function (data){
                return(
                    <div className='items'>
                        <Item key={data.id} model={data.model} prise={data.prise} desc={data.desc} img={data.img}/>
                    </div>
                )
            })}
        </div>
    );
}

export default Shop;

Item.js

import React from 'react';
function Item(props) {
    var aimg='';
    return (
        <div>
            { props.img ? <img className="itemimg" src={props.img} />  : <img className="itemimg" src='./../../public/imgs/emptyimg.jpeg'/>}
            <p>Модель:{props.model}</p>
            <p>Цена:{props.prise}</p>
            <p>Описание:{props.desc}</p>
        </div>

    );
}

export default Item;

[Nexus]

в чем ошибка?

В коде, в контексте.

[riaron86]

что вы придрались к контексту он у меня прекрасно работает, просто надо какую то реакт функцию прописать чтобы каатринки показывало и все.
Статично картинки в реакт умею выводить, как динамично вывести
весь код нормально показывает и показывает иконку когда указываешь неправильный путь к карнтинке

[Nexus]

что вы придрались к контексту

У вас в контексте AuthContext отсутствует свойство «products», если вы конечно его не добавили. А других ошибок я не вижу.

[ksa]

изображения не показывает в чем ошибка?

Что именно будет в переменной props.img?

<img className="itemimg" src={props.img} />

[riaron86]

обновил App.js

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

function App() {
    const prop = [];
    const polzunok=[];
    const checkboxi=[];
    const products=[];
    polzunok.push(
         {
            id: 1,
            name: "Цена",
            start1: 2000,
            start2: 7000,
            minr: 0,
            maxr: 10000,
        },
    );
    checkboxi.push(
        {id:1,mname:'os1',named:'Андроид',phdr:'Операционная Система'},
        {id:2,mname:'os2',named:'Айос',phdr:'Операционная Система'},
        {id:3,mname:'os3',named:'Виндоус',phdr:'Операционная Система'},
        {id:4,mname:'ram1',named:'2Гб',phdr:'Оперативная Память'},
        {id:5,mname:'ram2',named:'4Гб',phdr:'Оперативная Память'},
        {id:6,mname:'ram3',named:'6Гб',phdr:'Оперативная Память'},
        {id:7,mname:'ram4',named:'8Гб',phdr:'Оперативная Память'},
        {id:8,mname:'ram5',named:'12Гб',phdr:'Оперативная Память'},
        {id:9,mname:'rom1',named:'32Гб',phdr:'Память'},
        {id:10,mname:'rom2',named:'64Гб',phdr:'Память'},
        {id:11,mname:'rom3',named:'128Гб',phdr:'Память'},
        {id:12,mname:'rom4',named:'256Гб',phdr:'Память'},
        {id:13,mname:'diagonal1',named:'5.8',phdr:'Диагональ'},
        {id:14,mname:'diagonal2',named:'6.2',phdr:'Диагональ'},
        {id:15,mname:'diagonal3',named:'6.4',phdr:'Диагональ'},
        {id:16,mname:'diagonal4',named:'6.6',phdr:'Диагональ'},
        {id:17,mname:'dpi1',named:'1280 × 720',phdr:'Разрешение'},
        {id:18,mname:'dpi2',named:'1920 × 1080',phdr:'Разрешение'},
        {id:19,mname:'dpi3',named:'3840 × 2160',phdr:'Разрешение'},
        {id:20,mname:'dpi4',named:'2280×1080',phdr:'Разрешение'},
        {id:21,mname:'dsim1',named:'2x SIM',phdr:'Количество Сим Карт'},
        {id:22,mname:'dsim2',named:'1x SIM',phdr:'Количество Сим Карт'},
        {id:23,mname:'samsung',named:'Samsung',phdr:'Бренд'},
        {id:24,mname:'apple',named:'Apple',phdr:'Бренд'},
        {id:25,mname:'huawei',named:'Huawei',phdr:'Бренд'},
        {id:26,mname:'xiaomi',named:'Xiaomi',phdr:'Бренд'},
        {id:27,mname:'meizu',named:'Meizu',phdr:'Бренд'},
        {id:28,mname:'asus',named:'Asus',phdr:'Бренд'},
        {id:29,mname:'alcatel',named:'Alcatel',phdr:'Бренд'},
        {id:30,mname:'lenovo',named:'Lenovo',phdr:'Бренд'},
    )
    var checkbox1=[1,8,12,15,19,22,23];
    var checkbox2=[1,6,11,13,20,22,26];
    var checkbox3=[2,6,11,14,20,22,24];
    var checkbox4=[1,7,12,16,20,22,25];
    var checkbox5=[1,7,12,16,19,22,27];
    var checkbox6=[1,8,12,16,20,22,28];
    var checkbox7=[3,5,10,13,18,21,29];
    var checkbox8=[1,4,9,13,17,22,30];
    products.push(
        {id:1,img:'/../public/imgs/sgs20.jpg', model:"s20",prise:20000,desc:"Мощный и надежный",checkboxid:checkbox1},
        {id:2,img:null, model:"Mi Play",prise:8414,desc:"Функциональный",checkboxid:checkbox2},
        {id:3,img:null, model:"iPhone 14",prise:75682,desc:"Мощный",checkboxid:checkbox3},
        {id:4,img:null, model:"Nova 10 SE",prise:18109,desc:"Красивый",checkboxid:checkbox4},
        {id:5,img:null, model:"18s",prise:53099.56,desc:"Цена Качество",checkboxid:checkbox5},
        {id:6,img:null, model:"Смартфон ASUS ROG Phone 6D ",prise:53450,desc:"Производительный",checkboxid:checkbox6},
        {id:7,img:null, model:"One Touch Idol 4 Pro",prise:17514,desc:"Оптимальный",checkboxid:checkbox7},
        {id:8,img:null, model:"A7000",prise:9000,desc:"Доступный",checkboxid:checkbox8},
    )
    prop['polzunok']=polzunok;
    prop['checkboxi']=checkboxi;
    prop['products']=products;
  return (
    <div className="App">
        <AuthContext.Provider value={prop}>
            <Navbar/>
            <LeftMenu/>
            <Shop/>
        </AuthContext.Provider>

    </div>
  );
}

export default App;