title: Multiple buttons in React
body: <p>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 <code>onClick</code> 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 <code>setState()</code> from a component?</p>
  
  <p>Right now I have a submit button which ive used as a <code>onSubmit</code> and a start button which I am using as a <code>onClick</code> but also need a delete button and some others, not sure yet. </p>
  
  <p>Code:</p>
  
  <pre><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) =&gt; {
  const startingNum = newRanNum * 20;
  for(let i = startingNum; i &gt;= 0; i--) {
      await new Promise(resolve =&gt; {
          this.timer = setTimeout(() =&gt; {
           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 &lt; newRanNum; i++){
        inputArray.push('')
      }
      return this.setState({
        thought: inputArray
      });
    }
  
     handleSubmit(event) {
       if(event){
      event.preventDefault();
      let thought = this.state.thought.map(word =&gt; word + ' ');
      console.log(thought)
      this.thoughts.push(thought)
      event.preventDefault()
      this.setState({
        thought: []
      })
       }
    }
  
    render(){
      let src = this.state.currentImg;
      return(
        &lt;div&gt;
          &lt;Countdown name={'Countdown: '} countdown={this.state.timer} /&gt;
          &lt;DisplayCount name='Word Count: ' count={this.state.ranNum} /&gt;
          &lt;Image src={images[src]} /&gt;
          &lt;Button onClick={this.handleClick} name='Generate Inputs' /&gt;
          &lt;form onSubmit={this.handleSubmit}&gt; &lt;------------------------------
            &lt;ol&gt;
              {this.state.thought.map((input, index) =&gt; (
                &lt;Inputs type='text' key={index} value={input} onChange={event =&gt; { this.handleChange(event, index) }} className='textInputs' /&gt;
              ))}
          &lt;/ol&gt;
         &lt;input type='submit' value='Submit' /&gt;. &lt;---------------------------------
          &lt;/form&gt;
  
  
          &lt;div&gt;
              &lt;ol&gt;
                {this.thoughts.map(thought =&gt; 
                 &lt;DisplayPoem onDeleteClick={this.handleDeleteClick} name='Delete Thoughts' value={thought} /&gt;
                )}
              &lt;/ol&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  class DisplayPoem extends React.Component {
    render(){
      return (
        &lt;li&gt;
          &lt;span&gt;{this.props.value}&lt;/span&gt;
          &lt;button onClick={this.props.onClick}&gt;{this.props.name}&lt;/button&gt;
        &lt;/li&gt;
      )
    }
  }
  
  ReactDOM.render(
    &lt;Game /&gt;,
  document.getElementById('root')
  );
  </code></pre>