Onclick 警报并显示反应 js 中的下一项

Question

I want to show the Next Item Name when i click on BUSINESS NEWS 1/17/2022 20:00 the alert popup and next item name in display o.r EVENING NEWS 1/17/2022 19:00

Code:-

         const [comments, setComments] = useState([]);
    const [getname, linkName] = useState([]);

    useEffect(() => {
        callData();
    }, [])

    function callData() {
        axios.get(`http://localhost:9763/api/getRundown`,
            {
                headers: {
                    "accepts": "application/json",
                    'Access-Control-Allow-Origin': '*',
                },
                auth: {
                    username: 'admin',
                    password: 'password'
                },
                parms: {
                    Playlist: 'all'
                }
            })
            .then(response => {
                //setComments([...Object.values(response.data).flat()]);
                //console.log(response.data.Rundowns);
                setComments(response.data.Rundowns);
                //setComments([response.data]);
                //  console.log([response.data]);
            }).catch(error => {
                error('unable to fetch URL', error);
            });
    }

    function myClick(name) {
         alert(`click! ${name} `);
        linkName(name);
    }


    return (
        <div>
            <div className="box">
                <div className="header">
                    <div className="header-text1">Playlists</div>
                    <div className="header-text2"><FaCircle style={{ color: "#10C300", width: "10px", height: "10px" }} /> <FaCircle style={{ color: "#FC0000", width: "10px", height: "10px" }} /></div>
                </div>
                <div>


                    {comments.map((val, index) => {
                        // console.log("Inside map:", getname);
                        return (
                            <div className="TextLink" key={index}>
                                {/* <button onClick={myClick}>{val}</button> */}
                                <NavLink onClick={() => myClick(val)} to={{
                                    pathname: "/tableCheck"
                                }}>
                                    {val}</NavLink>
                            </div>
                        )
                    })
                    }
                </div>
                {/* style={({ isActive }) =>
                                    isActive
                                        ? {
                                            color: 'red',
                                            background: '#151920',
                                        }
                                        : { color: 'white' }
                                }
                                    > */}

            </div>
            <div className="Bottombox">
                <div className="header">
                    <div className="header-text1">Alerts</div>
                    <div className="header-text2"><FaCircle style={{ color: "#10C300", width: "10px", height: "10px" }} /> <FaCircle style={{ color: "#FC0000", width: "10px", height: "10px" }} /></div>
                </div>
                <div style={{ color: "white" }}></div>
            </div>
            <TableCheck val={getname} />
        </div>

    )
}

this upper code is only available to display the current click, not the next item so how can i display the next item name when i click if there is no item for display it shows null in alert

Answer 1

you can try to pass the index of the current iteration to the onClick function, and then, access the next value in the array (and make a check to ensure that is not null or empty string). like so:

<NavLink onClick={(index) => myClick(index)} to={{.....

and try to modify myClick function:

    function myClick(index) {
       if(comments[i+1] !== '' && comments[i+1] !== null) {
         alert(`click! ${name}`);
         linkName(comments[i+1]);
       }
    }
Hope you understood my answer let me know if you got a question or the issue is not solved yet.

Answer 2

From what I can understand (I'm not very clear), you should use useState react hook to cause a re-render so that react knows what item to render next.

Can you show the entire code so that I can understand what's going on?