如何通过单击按钮显示特定div id中的数据数组？

Question

I create a component of react. and there one array with some values. so I need to display that value or data in any specific div by clicking in a button.

this is my array in component.

    constructor(){
        super()
        this.state = {
            notificaion: [
                "Notification-1",
                "Notification-3",
                "Notification-4",
                "Notification-5",
            ]
        } 
    }

this is my button with click event.

<button onClick={this.getNotification}>{this.state.notificaion.length}</button>

this is the function that I have create. and to push data in specific div.

    getNotification = () =>{ 
           return(
            this.state.notificaion.map(items =>(
                <li key={items}>{items}</li>
            ))
        ) 
    }

here I want to display when buttons is clicked

<strong>{this.getNotification()}</strong>

This is my full code that I have been tried.

import React, {Component} from 'react'; 



class Menu2 extends Component{

    constructor(){
        super()
        this.state = {
            notificaion: [
                "Notification-1",
                "Notification-3",
                "Notification-4",
                "Notification-5",
            ]
        } 
    }

    getNotification = () =>{ 
           return(
            this.state.notificaion.map(items =>(
                <li key={items}>{items}</li>
            ))
        ) 
    }

    render(){

        return(
            <div className="header">
                <div className="container">
                <div className="row">
                        <div className="col-lg-12 col-sm-12 col-xs-12">
                            <div className="text-center mb-20">
                                <h1>Notificaion Status</h1>
                                <p>Check notificatin read/unread</p>
                            </div>
                        </div>
                    </div> 
                    <div className="row">
                        <div className="col-lg-12 col-sm-12 col-xs-12">
                            <div className="card border-dark mb-3"> 
                                <div className="card-body text-dark"> 
                                    <p className="card-text" style={{textAlign: 'center'}}>

                                        {this.state.notificaion.length > 0 
                                         ?
                                        <span>You Have <button onClick={this.getNotification}>{this.state.notificaion.length}</button> Unread Notifications</span>
                                         : 
                                        <span>You Have <button onClick={this.getNotification}>{this.state.notificaion.length}</button> Unread Notifications}</span>} 

                                    </p> 
                                    <strong>{this.getNotification()}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

export default Menu2;

Answer 1

I would implemented as such:

this.state = {
  visible: false,
  notifications: ...
}

toggleVisibility() =>{
  this.setState({
    visibile: true
  })
}

Don't forget to bind the "toggleVisibility" function. Then in your component:

<button onClick={this.toggleVisibility}/>
...
{if(this.state.visible){
  <strong>this.state.notifications.map(notification,i) =>
    <li key={i}>{notification}</li>
  </strong>
}

Answer 2

You can add a property showNotification in state. And based on the value of it, we can show the notification.

Also add a method showNotificationHandler that toggles the showNotification value.

class Menu2 extends Component {
  constructor() {
    super();
    this.state = {
      notificaion: [
        "Notification-1",
        "Notification-3",
        "Notification-4",
        "Notification-5"
      ],
      // adding a property "showNotification"
      showNotification: false
    };
  }

  getNotification = () => {
    return this.state.notificaion.map(items => <li key={items}>{items}</li>);
  };

  // method that toggles the "showNotification" value
  showNotificationHandler = () => {
    this.setState(({ showNotification }) => ({
      showNotification: !showNotification
    }));
  };

  render() {
    return (
      <div className="header">
        <div className="container">
          <div className="row">
            <div className="col-lg-12 col-sm-12 col-xs-12">
              <div className="text-center mb-20">
                <h1>Notificaion Status</h1>
                <p>Check notificatin read/unread</p>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-12 col-sm-12 col-xs-12">
              <div className="card border-dark mb-3">
                <div className="card-body text-dark">
                  <p className="card-text" style={{ textAlign: "center" }}>
                    {this.state.notificaion.length > 0 ? (
                      <span>
                        You Have{" "}
                        <button onClick={this.showNotificationHandler}>
                          {this.state.notificaion.length}
                        </button>{" "}
                        Unread Notifications
                      </span>
                    ) : (
                      <span>
                        You Have{" "}
                        <button onClick={this.showNotificationHandler}>
                          {this.state.notificaion.length}
                        </button>{" "}
                        Unread Notifications}
                      </span>
                    )}
                  </p>
                  <strong>
                    // Depending on the value of "showNotification" we get notification 
                    // if "showNotification" is true then get the notification
                    {this.state.showNotification && this.getNotification()}
                  </strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Menu2;

Answer 3

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notificaion: [
        "Notification-1",
        "Notification-3",
        "Notification-4",
        "Notification-5",
      ],
      notificationHtml: ""
    }
  }
  getNotification = () => {
    this.setState({
      notificationHtml: this.state.notificaion.map(items => (
        <li key={items}>{items}</li>
      ))
    });
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.getNotification}>{this.state.notificaion.length}</button>
        <div>
          {this.state.notificationHtml}
        </div>
      </div>
    );
  }
}
export default App;