Elegant ES6 way to update state in React

Question

The syntax to update state in React has change a lot. I'm trying to find the most simple and elegant way to initiate and update it.

Got this RN code:

const { quotes } = require('./quotes.json')

class QuoteScreen extends Component {
  state = {
    QuoteIndex: 0
  }
  render() {
    return (
      <Image ...>
        <View ...>
          ...
          <ButtonNextQuote
            onPress={() => {
              this.setState((prevState, props) => {
                return {
                  QuoteIndex: (prevState.QuoteIndex + 1) % (quotes.length - 1)
                }
              })
            }}
          />
        </View>
      </Image>
    )
  }
}

Would it be possible to reduce the updating of state in the onPress?

Would like to avoid calling an anonymous function twice but don't want to reference and bind a handler. Would also like to avoid using the return..

Answer 1

I would store the update function in a variable outside the class, e.g.

const newState = ({QuoteIndex: i}) => ({QuoteIndex: (i + 1) % nQuotes});

(of course you can chose to define the function in any way you like, maybe "terseness" isn't as important to you anymore if it isn't inlined)

And then you can just call this.setState(newState):

onPress={() => this.setState(newState)}