withState

Manages a single state value, providing a function to update the value and accepting an optional default value.

Flow Type

type withState = (
  stateName: string,
  stateUpdaterName: string,
  initialState: any | (props: Object) => any
) => HigherOrderComponent

Examples

Simple state

withState('count', 'setCount', 0)

Incoming props

{}

Outgoing props

{
  count: 0,
  setCount: (count: number) => {},
}

If the setCount prop is called like this:

setCount(1)

Then the new outgoing props would be:

{
  count: 1,
  setCount: (count: number) => {},
}

Event handlers

The withState utility is often combined with withHandlers to create simple value setters:

compose(
  withState('count', 'setCount', 0),
  withHandlers({
    incrementCount: props => event => {
      event.preventDefault()
      props.setCount(props.count + 1)
    },
    decrementCount: props => event => {
      event.preventDefault()
      props.setCount(props.count - 1)
    },
  })
)

Dynamic initial values

You can also pass a function as the third initialState argument. This function will take the incoming props, and return the initial value for the state manager.

withState('balance', 'setBalance', props => {
  return props.initialBalance - props.totalPurchases
})

This would set the initial value of balance to the value of initialBalance minus the totalPurchases.

results matching ""

    No results matching ""