Dynamically render multiple buttons

Question

I am new in react Js and i want to build a multiple buttons like on link. Can anybody help me .It will be very helpful to understand statements and components .

http://noxious-ornament.surge.sh/

i try to write something like this but i don't know how to continue.

import React, { Component } from 'react'
import './Ar.css';




class Ar extends Component {
    constructor() {
        super();
        this.state = {
            buttonPressed: 0
            // 0 could be your default view
        }
    }

    handleClick = (button) => {
        this.setState({ buttonPressed: button })
    }

    render() {
        return(
            <div>
            <button 
                 className='button1' 
                 onClick={() => this.handleClick(1)}
             > BUTTON 1
             </button>
             
             <button 
                 className='button2' 
                 onClick={() => this.handleClick(1)}
             > BUTTON 2
             </button>
             <button 
                 className='button2' 
                 onClick={() => this.handleClick(1)}
             > BUTTON 3
             </button>

   
             
}
       </div>
        )
    }
}
export default Ar

Answer 1

This is a start. Next I'd add react-router-dom so you can load the SomePage component.

const {Component} = React;

function SomePage(props){
  return (
    <div>
      Button {props.value} has been pressed! 
      <button>back</button>
    </div>
  )
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      buttonPressed: 0,
      buttonCount: [1,2,3,4,5]
    }
  }

  handleClick = (event) => {
    this.setState({ buttonPressed: event.target.id });
    
  }

  render() {
    return(
      <div>
      {this.state.buttonCount.length > 0 ? this.state.buttonCount.map((item,index) => (
        <button id={item} key = {index} onClick={()=>this.handleClick} className={`button${item}`}>
        {item}
        </button>
      ))
      : null
      }
                  
      </div>
        )
    }
}

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.button1 {
  background-color: green;
}
.button2 {
  background-color: blue;
}
.button3 {
  background-color: red;
}
.button4 {
  background-color: yellow;
}
.button5 {
  background-color: purple;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>