cant pass back text in a JavaScript componate (React)-CodePudding

so im trying to make a button display text in it but im having a hard time.

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

const STYLES = 
[
  'btn--primary',
  'btn--outline'
]
const SIZES = [
    'btn--medium',
    'btn--large'
]

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

  const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]

  const checkButtonSize =   SIZES.includes(buttonSize) ? buttonSize : SIZES[0]

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

}

if i just put plain text where child is it will display but if i try to do it in my navbar it will just make a button with no text.

import React, { Component } from 'react'
import {MenuItems} from './MenuItems'
import {Button} from '../Button.js'
import './Navbar.css'
class Navbar extends Component{
  state = { clicked : false}
  handleClick = () =>
  {
    this.setState({clicked: !this.state.clicked})
  }

  render()
  {
    return(
      <nav className="NavBarItems">
        <h1 className='navbar-logo'>React<i className='fab fa-react'></i></h1>
        <div className='menu-icon' onClick={this.handleClick}>
          <i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>

        </div>
        <ul className={this.state.clicked ? 'nav-menu active':'nav-menu'}>
          {MenuItems.map((item,index)=>{
           return(
            <li key={index}>
              <a className={item.cname} href={item.url}>
                {item.title}
                </a>
                
                </li>
           )})}
        </ul>
        <Button>Sign Up</Button> 
      </nav>
    );
  }
}

export default Navbar

Thank you in advance for anyone who has an idea on fixing this.

also sorry i dont know the proper terms, I do more python, java, and c coding so this is a new world to me.

CodePudding user response：

You probably want to use the prop 'children' here instead of 'child' as its the official data type for your use case, can refer to this for more info https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891

So in this case you can modify your button file as such:

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

const STYLES = 
[
  'btn--primary',
  'btn--outline'
]
const SIZES = [
    'btn--medium',
    'btn--large'
]

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

  const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]

  const checkButtonSize =   SIZES.includes(buttonSize) ? buttonSize : SIZES[0]

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

}

CodePudding user response：

You need to use the built-in property children, this name is used by convention and it is always plural. It will be set to whatever you put between the <Button> opening and closing tags.

In other words, rename the child destructuring property to children in the Button component, both in the header where it is used.