Блог

Я получаю nominee_name как последнее span имя даже после нажатия на нужный элемент span. Как я могу получить правильное имя диапазона отсюда <span className="countname" key={data.nomineename} ref={nominee_name} onClick={handleClick}>{data.nomineename}</span> . Указанный выше интервал повторяется на основе полученных данных.

 import React, { useRef, useEffect, useState } from "react";
import Axios from "axios"; 

const Dashboard = props => {
    const [nominationCount, setNominationCount] = useState([]);
    const [nameText, setNameText] = useState("");
    let nominee_name = useRef(null);    
    const isMounted = useRef(false);
   
    

    useEffect(() => {
        isMounted.current = true;
        return () => isMounted.current = false;
    }, []);
    
  useEffect(() => {
        const fetchData = async () => {
            try {
                const res = await Axios.get('http://localhost:8000/service/nominationcount');
                if (isMounted.current) {
                    setNominationCount(res.data);
                    console.log("Nomination count data from server :"   res.data);
                }
            } catch (e) {
                console.log(e);
            }
        }
        fetchData();
    }, []);


    const handleClick = () => {
        setNameText(nominee_name.current.outerText);
    }
 return (
  <div className="space_1 tile">
        <h3>Nominations Count</h3>
        <div className="grid-container">
            {
                    !nominationCount.length amp;amp; (<div className="nonominationdata">No nominations count to display !</div>)
                }
                {
                    nominationCount.map(data => (
                         <div key={data.id}>
                                <div onClick={() => {setOpen(!open); }} className="count badge" >
                                    <span className="badgenumber" value={data.count} key={data.count}>{data.EmailCount}</span>
                                     <span className="countname" key={data.nomineename}  ref={nominee_name} onClick={handleClick}>{data.nomineename}</span>
                                </div>
                         </div>
                    ))
                }
        </div>
   </div>
   
    <Modal
         open={open}
         onClose={() => {
                    setOpen(false);
                }}
                className={classes.modal}>
                <form className={classes.form}>
                    <label className={classes.label}>Confirm winner {nameText}</label>
                    <input className={classes.submit} type="submit" value="Confirm" />
                </form>
            </Modal>
)
 

}

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

Просто передайте имя в свой обработчик щелчков:

 (
<span className="countname" key={data.nomineename}
    onClick={()=>setNameText(data.nomineename)}>{data.nomineename}</span>
)