Реагирование: Попытка передать массив функциональному компоненту, но он не будет отображаться

Question

Как видно из заголовка ... Я могу заставить консоль выводить массив, но он не будет отображаться на моей навигационной панели.

Из App.js:

unValidatedUserButtons = ["Search", "Login", "Register"];  

render() {
    return (
      <Layout>
          <Header />
          <Topnav buttons={this.unValidatedUserButtons}/>
      </Layout>
    )
}

до TopNav:

buttonHandlerTnav = (buttonPass) => {
    let newButtons = [...buttonPass];
    this.setState({buttons: newButtons});
    this.setState({needButtons: false});
}

render(){
    if (this.state.needButtons)
    this.buttonHandlerTnav(this.props.buttons);
    return (
        <div className={classes.TopNav}>
                <MenuButton />       
               <AccountButtons 
                buttonPass={this.state.buttons} /> 
        </div>
    );   
}

Затем к кнопкам Account:

const buttonHandlerAccount = (newButtons) => { newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    });
}

const accountButtons = (props) => {

    // console.log(props.buttonPass);
    return (
        <div className={classes.AccountButtons}>
        {buttonHandlerAccount(props.buttonPass)}
        </div>
    )
}

Если кто-нибудь может помочь мне заставить мои кнопки отображаться, это будет очень цениться.

Answer 1

Похоже, вам не хватает return в вашем функциональном компоненте. Попробуйте это решить вашу проблему:

const buttonHandlerAccount = (newButtons) => { 
    return newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    });
}

Или эквивалент короткой руки:

const buttonHandlerAccount = (newButtons) => (newButtons.map((Button, index)    => {
        return (<button key={index}>{Button}</button>)
    }))

Answer 2

buttonHandlerAccount отсутствует оператор return.

// Button Handler Account.
const buttonHandlerAccount = (newButtons) => {
  return newButtons.map((Button, index) => <button key={index}>{Button}</button>)
}