Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input cannot use with recompose's withStateHandlers ?

See original GitHub issue

Description

So I’m trying to use react-materialize with recompose’s withStateHandlers to make a controlled input component with a default value. Here is the code (I want the starting text to be ‘hi’):

// BottomModal.js

import React from 'react'
import { Modal, Input, Button } from 'react-materialize'
import { compose, withStateHandlers } from 'recompose'

const enhance = withStateHandlers(
  // States
  {
    name: 'hi',
    price: 0
  },
  // State Handlers
  {
    handleNameChange: (state, props) => event => ({
      name: event.target.value
    }),
    handlePriceChange: (state, props) => event => ({
      price: parseInt(event.target.value)
    }),
    resetInput: (state, props) => () => ({
      name: '',
      price: 0
    })
  }
)

const BottomModal = (props) => {
  console.log(props.name)
  return (
    <Modal
      header={props.header}
      bottomSheet
      trigger={
        <Button style={{position: 'fixed', right: '24px', bottom: '24px'}} floating large waves='light' icon='add' />
      }
      actions={
        <div>
          <Button onClick={props.resetInput} modal='close' flat className='grey lighten-5'>ยกเลิก</Button>
          <Button onClick={props.onConfirm} modal='close' waves='light'>เพิ่ม</Button>
        </div>
      }
    >
      <Input value={props.name} onChange={props.handleNameChange} label='รายการ' />
      {/*
        normal <input /> is working fine btw. But it cannot have label like the <Input /> 
        <input value={props.name} onChange={props.handleNameChange} type='text' />
      */}

    </Modal>
  )
}

export default enhance(BottomModal)

But this gave me a warning:

Warning: Input contains an input of type text with both value and defaultValue props.
Input elements must be either controlled or uncontrolled (specify either the value prop,
or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled
input element and remove one of these props.
More info: https://fb.me/react-controlled-components

And I tried to make name to be an empty string, and the warning is gone:

  // States
  {
    name: '',
    price: 0
  },

~I tried to do this again using traditional React Component (extends React.Component, setState, handleChange, etc.) and it works fine (even with name: 'hi').~ https://github.com/react-materialize/react-materialize/issues/496

So I’m wondering what did I do wrong, or recompose is not fully compatible with react-materialize.

Expected behavior: Work normally like normal <input /> or like without recompose

Actual behavior: throws a warning