React — Data down, Action up

Peter Kim
Peter Kim
Jul 23, 2017 · 2 min read

With React, multiple components coexist and components can live inside other components. We’ve heard of data down, action up but it’s a tad hard to understand if you’re a more visual person. In order to explain it in a simple manner, we’ll look at some code that passes data down into their child components and how the action is then passed back up.

Let’s have a simple app that shows every board game we have on our book shelf and when we buy a new board game, we can add it to our collection. In this case we

class BoardGameLibrary extends React.Component{
constructor(){
super()
this.state = {
collection: ["Settlers of Catan", "7 Wonders", "Pandemic", "Dead
Of Winter"]
}
}
handleSubmit = (game) => {
this.setState({
collection: [...this.state.collection, game]
})
}
render(){
let list = this.state.collection.map(game => <li>{game}</li>)
return(
<div>
<ul>
{list}
</ul>
<h5>
Add a game: <AddGame onSubmit={this.handleSubmit}/>
</h5>
</div>
)
}
}

In the above example, the component renders out a list of board games in the current collection. The “handleSubmit” function is passed down into the AddGame component so that the function can be used as a prop. The reason it is passed down is because the current component “BoardGameLibrary” handles the collection of the board games and anything to do with it. The child component is used for a couple different reasons: being able to re-utilize the component in other components/containers, to prevent clutter and messy code, etc…

In the child component, “AddGame”, we can see something like the following:

class AddGame extends React.Component{
constructor(){
super()
this.state={
game: ''
}
}
handleChange = (ev) => {
this.setState({
game: ev.target.value
})
}
handleSubmit=(ev)=>{
ev.preventDefault()
this.props.onSubmit(this.state.game)
this.setState({
game: ''
})
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<input type='text' onChange={this.handleChange} value=
{this.state.game}/>
</form>
)
}
}

In the handleSubmit function of the AddGame component, it uses the prop that was passed down from the parent component (data down). Now we have a function that was passed down and when we submit the form, the parent component needs to be notified of the change. This is how we send the action back up. The only way that we are able to send any changes or actions back up the component hierarchy is by following the data down, action up rule.

This is a very basic example of data down, action up. If you are still confused or if I’ve got something wrong, let me know and let’s chat about it! Thanks!

Peter Kim

Peter Kim

Full Stack Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade