onClick to link from parent array

JavaScript
1

so i’m trying to make signUp and login button, what I want is when people click on it , it will changes to other link . can some sees what I do wrong?

//parent

import SignInStyle from "./signInStyle";

const signInBar = [
    {
        label: 'Sign Up',
        link: 'www.google.com'
    },
    {
        label: 'Login',
        link: 'www.oppapost.net'
    }
]

const SignIn = () => {
    return ( 
        
        <div
            style={{
                width:'100%',
                height:'2rem',
                // backgroundColor:'blue',
                display:'flex',
                justifyContent:'right',
                alignItems:'end',
            }}
        >
             {/* container Sign up & Login */}
            <div
                style={{
                    // backgroundColor:'pink',
                    width:"10rem",
                    height:'2rem',
                    display:'flex',
                    justifyContent:'right',
                }}
            >
                    {signInBar.map((sign) =>
                        <SignInStyle
                            sign = {sign}
                        />
                    )}
            </div>
        </div>
     );
}
 
export default SignIn;

//children

"use client"

import { useRef } from "react";

const SignInStyle = ({sign}) => {
    
    const docRef = useRef()

    return (  
        <div
            ref={docRef}
            style={{
                display:'flex',
                justifyContent:'center',
                alignItems:'center',
                // backgroundColor:'green',
                width:'4rem',
                fontSize:'1rem',
                color:'black',
                cursor:'pointer'
            }}
            onMouseEnter={() => {
                docRef.current.style.textDecoration = 'underline'
            }}
            onMouseLeave={() => {
                docRef.current.style.textDecoration = ''
            }}
            onClick={()=>{
                docRef.current = {sign.link}
            }}
        >
            {sign.label}
        </div>
    );
}
 
export default SignInStyle;
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.