React <Link> Button is not showering text that i declare

Question

Currently, I facing issues that I code a word to display on my HTML webpage, but it's not showing. but if I use inspect on my web browser and manually enter "sign up" its is able to appear on the homepage

import React, { useState } from 'react'
import {Link} from 'react-router-dom'
import {MdFingerprint} from 'react-icons/md'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'

function Navbar() {
    const [click,setClick]= useState(false);
    const [button,setButton]= useState(true)

    const handleClick = () => setClick(!click);
    //const closeMobileMenu = () => setClick(false)

    const showButton = () => {
        if (window.innerWidth <= 960){
            setButton(false)
        } else {
            setButton(true) 
        }
    }
    window.addEventListener('resize',showButton);
    return (
        <>
           <div className="navbar">
               <div className="navbar-container container">
                   <Link to='/Navbar1' className="navbar-logo">
                    <MdFingerprint className = "navbar-icon" />
                   UOW
                   </Link>
                   <div className="menu-icon" onClick={handleClick}>
                    {click ? <FaTimes/> : <FaBars/>}
                    
                    
                   </div>
                   <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li className="nav-item">
                        <li className="nav-item">
                            <Link to='/' className="nav-links">
                                Home
                            </Link>
                        </li>
                        <li className="nav-item">
                            <Link to='/staff' className="nav-links">
                                Staff list
                            </Link>
                        </li>
                        <li className="nav-btn">
                            {button?(
                                <Link to="/sign-up" className='btn-link'>
                                    <Button buttonStyle='btn--outline'> SIGNUP </Button>
                                </Link>
                            ):(
                                <Link to="/sign-up" className='btn-link'>
                                    <Button buttonStyle="btn--outline" buttonSize='btn--mobile'> SIGNUP </Button>
                                </Link>
                         )}
                        </li>

                    </li>
                   </ul>
               </div>
            </div> 
        </>
    )
}


export default Navbar

As you can see I am able to make a button but the problem is that the text does not display on the button even in the google chrome inspect mode. I am unable to see the word "SIGNUP" in it the result :

the word "sign up" does not shower in the button

Below here are my Button.js code

import React from 'react'
import './Button.css';

const STYLES= ['btn--primary', 'btn--outline']

const SIZES = ['btn--medium', 'btn--large', 'btn--mobile', 'btn--wide']

const COLOR = ['primary', 'blue', 'red', 'white']

export const Button = ({lecturer, type, onClick, buttonStyle, buttonSize,buttonColor}) =>{

    const checkButtonStyle=STYLES.includes(buttonStyle)? buttonStyle :STYLES[0]
    const checkButtonSize=STYLES.includes(buttonSize)? buttonSize :SIZES[0]
    const checkButtonColor=STYLES.includes(buttonColor)? buttonColor :COLOR[0]

    return (
        <button className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonColor} `  } onClick={onClick} type={type}>{lecturer}</button>
    )

}

Answer 1

Well, you accepting your inner button text as a prop name as lecturer, so according to your <Button> component you need to pass its string to it like this:

<Link to="/sign-up" className='btn-link'>
   <Button buttonStyle='btn--outline' lecturer='SIGNUP'></Button>
</Link>

NOTE: You can read more about props and components here.