[riaron86]

компонент ползунок не видит значений при проверке в компоненте leftmenu console.log(prop.polzunok.[0].maxr) к примеру выводит без ошибок)

import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
import Polzunok from "./elements/Polzunok";
import Checkbox from "./elements/Checkbox";
function LeftMenu() {
    const prop=useContext(AuthContext);
    console.log(prop.polzunok[0].maxr)
    return (
        <div className="LeftMenu">
            <div className="polzun">
                <Polzunok polz={prop.polzunok[0]}/>
            </div>


        </div>
    );
}

//
export default LeftMenu;

import React,{useState,useRef,useEffect} from 'react';
import css from '../../css/components/Polzunok.css';

function Polzunok(polz) {
    const p=polz;
    const rangeq = useRef();
    const [inputMin,setInputMin]=useState(p.start1);
    const [inputMax,setInputMax]=useState(p.start2);

    const priceGap = 1000;

    useEffect(() => {
        let minPrice = parseInt(inputMin),
            maxPrice = parseInt(inputMax);
        if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
            setInputMin(minPrice) ;
        }else{
            setInputMax(maxPrice);
            rangeq.right = 100 - (maxPrice / p.maxr) * 100 + "%";
        }
    }, [inputMin]);

    useEffect(() => {
        let minPrice = parseInt(inputMin),
            maxPrice = parseInt(inputMax);
        if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
            setInputMin(maxPrice);
        }else{
            setInputMax(maxPrice);
            rangeq.current.style.right = 100 - (maxPrice / p.maxr) * 100 + "%";
        }
    }, [inputMax]);
    useEffect(() => {
        let minVal = parseInt(inputMin),
            maxVal = parseInt(inputMax);;
        if((maxVal - minVal) < priceGap){
            setInputMin(maxVal - priceGap);
        }else{
            setInputMin(minVal);
            setInputMax(maxVal);
            rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
            rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
        }
    }, [inputMin]);

    useEffect(() => {
        let minVal = parseInt(inputMin),
            maxVal = parseInt(inputMax);
        if((maxVal - minVal) < priceGap){
            setInputMax(minVal + priceGap);
        }else{
            setInputMin(minVal);
            setInputMax(maxVal);
            rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
            rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
        }
    }, [inputMax]);

    return (
        <div className="polzunok">
            <h4>{p.name}</h4>
            <div className="slider">
                <div className="progress" ref={rangeq}></div>
            </div>
            <div className="range-input">
                <input type="range" className="range-min" value={inputMin} onChange={e => setInputMin(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
                <input type="range" className="range-max" value={inputMax} onChange={e => setInputMax(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
            </div>
            <div className="price-input">
                <div className="field">
                    <span>Min</span>
                    <input type="number" className="input-min" value={inputMin} onChange={e => setInputMin(e.target.value)}/>
                </div>
                <div className="separator"></div>
                <div className="field">
                    <span>Max</span>
                    <input type="number" className="input-max" value={inputMax} onChange={e => setInputMax(e.target.value)}/>
                </div>
            </div>
        </div>
    );
}

export default Polzunok;

⁶