ReactJS отправка модальных данных из элементов карты - PullRequest
Новая
       6

ReactJS отправка модальных данных из элементов карты

0 голосов
/ 24 января 2020

У меня есть карта, которая отображает несколько элементов, и мне нужно, когда один элемент из модальности, привязанной к карте, должен загружать данные об идентификаторе этого выбранного элемента внутри модального поля. Вот так: 

                          <ListGroup>
                            {userinfo.map(item =>
                                (
                                    <>
                                        <ListGroup.Item key={item.id} onClick={handlePassInfoShow}> 
                                       {item.name}</ListGroup.Item>                      
                                    </>
                                )
                            )}
                        </ListGroup>
                          <ModalPassInfo
                            modelClose={() => handlePassInfoClose()}
                            modelShow={showPaaInfo}
                            //id={item.id}
                            setshowPaaInfo={setshowPaaInfo}
                        />

Здесь я сопоставляю массив пользователя и добавляю элемент группы списков к каждому из них с помощью модального onClick. Теперь, когда что-то нажимается внутри карты, нужно открыть модал и прочитать данные о выбранном элементе. И мой модал вот так. 

const ModalPassInfo = ({modelShow, modelClose, id, showPaaInfo}) => {

const ref = React.createRef();
const [isError, setError] = useState(false);
const [isLoading, setLoading] = useState(true);

const [country_list, setCountries] = useState([]);
const [message, setMessage] = useState("");
const [data, setData] = useState({
   //data about user
});
useEffect(() => {
    loadNetwork();
}, []);

const loadNetwork = () => {
    setLoading(true);
    setError(false);
    const selector = api.getItems("selector", {
        tables: "country_list"
    }).then(res => {
        let response = res.data;
        setCountries(response.country_list);
    });
    const data = api.getItems(`user-info/${id}`, {
    }).then(res => {
        let response = res.data;
        setData(response);
    });

    Promise.all([selector, data]).then(res => {
        console.log(res);
        setError(false);
        setLoading(false);
    }).catch(e => {
        console.log(e);
        setMessage(e.toString());
        setLoading(false);
        setError(true);
    });
};

const onRefresh = () => {
    loadNetwork();
};

if (isError) {
    return <ErrorMessage message={message} onRefresh={onRefresh}/>
}

if (isLoading) {
    return <Loader/>
}

Если я go на страницу, то модал загружается сразу. А во время onClick извлекается только последний идентификатор элемента. И мои консты 

const [showPaaInfo, setshowPaaInfo] = useState(false);
const handlePassInfoClose = () => setshowPaaInfo(false);
const handlePassInfoShow = () => {
    setshowPaaInfo(true)
};

Мой вопрос. Любой элемент на карте должен посылать идентификатор модальной при нажатии на элемент. Где я не прав?

1 Ответ

1 голос
/ 24 января 2020

Определить одно состояние 

const [show, setShow] = React.useState(false);

функция 

const handlePassInfoShow = (data){
 setShow(true);
 console.log(data);
}

Измените это на 

                        <ListGroup>
                            {userinfo.map(item =>
                                (
                                    <>
                                        <ListGroup.Item key={item.id} onClick={()=>handlePassInfoShow(item)}> 
                                       {item.name}</ListGroup.Item>                      
                                    </>
                                )
                            )}
                        </ListGroup>
                       {show && ( <ModalPassInfo
                            modelClose={() => handlePassInfoClose()}
                            modelShow={showPaaInfo}
                            //id={item.id}
                            setshowPaaInfo={setshowPaaInfo}
                         />
                         )}
...