Multiple buttons in React

I have an app which has multiple buttons, I am still a bit new to React and am not sure how to deal with multiple onClick functions. I know I could rename them slightly, but will React still know that it as to deal with a click event? Do I need to have the onClick in separate components and then somehow pass down state as a prop? Can I setState() from a component?

Right now I have a submit button which ive used as a onSubmit and a start button which I am using as a onClick but also need a delete button and some others, not sure yet.

Code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Image } from './Image.js'
import { Button } from './Button.js'
import { images } from './assets/images.js'
import { Countdown } from './Countdown.js'
import { DisplayCount } from './DisplayCount.js'
import { Inputs } from './Inputs.js'

class Game extends React.Component{
  constructor(props){
    super(props)

    this.timer = null
    this.thoughts = []
    this.thought = []

    this.state = {
      currentImg: 0,
      timer: null,
      ranNum: null,
      thought: [],
      isSubmitted: false
    }

    this.handleClick = this.handleClick.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

countdownClock = async (newRanNum) => {
const startingNum = newRanNum * 20;
for(let i = startingNum; i >= 0; i--) {
    await new Promise(resolve => {
        this.timer = setTimeout(() => {
         this.setState({
           timer: i
         })
        resolve()
     }, 1000)
   });
  }
}

handleChange(event, index) {
  const inputs = [...this.state.thought];
  inputs[index] = event.target.value
  this.setState({
    thought: inputs
  });
}

  handleClick(){
    clearTimeout(this.timer)
    let newRanNum = Math.floor(Math.random() * 20);
    this.countdownClock(newRanNum)
    this.generateStateInputs(newRanNum)
    // this.generateInputs(this.state.thought)
    let current = this.state.currentImg;
    let next = ++current % images.length;
    this.setState({
      currentImg: next,
      ranNum: newRanNum
    })
  }

  generateStateInputs(newRanNum){
    let inputArray = []
    for(let i = 0; i < newRanNum; i++){
      inputArray.push('')
    }
    return this.setState({
      thought: inputArray
    });
  }

   handleSubmit(event) {
     if(event){
    event.preventDefault();
    let thought = this.state.thought.map(word => word + ' ');
    console.log(thought)
    this.thoughts.push(thought)
    event.preventDefault()
    this.setState({
      thought: []
    })
     }
  }

  render(){
    let src = this.state.currentImg;
    return(
      <div>
        <Countdown name={'Countdown: '} countdown={this.state.timer} />
        <DisplayCount name='Word Count: ' count={this.state.ranNum} />
        <Image src={images[src]} />
        <Button onClick={this.handleClick} name='Generate Inputs' />
        <form onSubmit={this.handleSubmit}> <------------------------------
          <ol>
            {this.state.thought.map((input, index) => (
              <Inputs type='text' key={index} value={input} onChange={event => { this.handleChange(event, index) }} className='textInputs' />
            ))}
        </ol>
       <input type='submit' value='Submit' />. <---------------------------------
        </form>


        <div>
            <ol>
              {this.thoughts.map(thought => 
               <DisplayPoem onDeleteClick={this.handleDeleteClick} name='Delete Thoughts' value={thought} />
              )}
            </ol>
          </div>
      </div>
    )
  }
}


class DisplayPoem extends React.Component {
  render(){
    return (
      <li>
        <span>{this.props.value}</span>
        <button onClick={this.props.onClick}>{this.props.name}</button>
      </li>
    )
  }
}

ReactDOM.render(
  <Game />,
document.getElementById('root')
);