Skip to content

Send multiple props across components React

I am trying to send two variables from the Component ‘Game’ to the Component ‘App’ but I am unsure how to send more than one prop at a time.

This what I have:

//App Component
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      score: 0,
    }
    this.changeScore = this.changeScore.bind(this)
  }
  changeScore(newScore) {
    this.setState(prevState => ({
      score: prevState.score + newScore
    }))
  }
  render() {
    return(
      <div>
        <Game onClick={this.changeScore}/>
        <Score score={this.state.score}/>
      </div>
    )
  }
}

//Game Componenet
class Game extends Component {
    constructor(props) {
        super(props)
        this.state = {
            score: 0,
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        console.log('Clicked')
        this.props.onClick(this.state.score)
    }
    render() {
        return(
            <div>
                <button onClick={this.handleClick}> Score Button </button>
            </div>
        )
    }
}

//Score Component
class Score extends Component {
    render() {
        const score = this.props.score
        return(
            <div>
                <h1>Score: {score}</h1>
            </div>
        )
    }
}

With this I am able to send the prop ‘score’ from ‘Game’ to ‘App’ but I was wondering if it was possible to send more then just the one prop, such as ‘score’ and a new variable, ‘count’ with the same button press, to ultimately be able to display both ‘score’ and ‘count’ in the ‘Score’ Componenet.

Thanks.

Answer

Sure you can, just update the function you defined in the Parent App component to accept two arguments.

App.js

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      score: 0,
      count: 0
    }
    this.changeScore = this.changeScore.bind(this)
  }
  changeScore(newScore, count) {
    this.setState(prevState => ({
      score: prevState.score + newScore,
      count: prevState.count + count
    }))
  }
  render() {
    return(
      <div>
        <Game
           onClick={this.changeScore}
           score={this.state.score}
           count={this.state.count}
        />
        <Score score={this.state.score} count={this.state.count}/>
      </div>
    )
  }
}

Game.js //refactored since it doesnt need to use state

const Game = ({ onClick, count, score }) => {
   const newScore = score + 10
   const newCount = count + 1
   return (
       <button onClick={() => onClick(newScore, newCount)}>Score</button>
   )
}