Search code examples
reactjsflowtype

React button type changed while passing in a value

So Im working on React with flowtype, and I have a value with a type of say ItemType, and it is an object of different properties.

For example, if I declare item: ItemType, and in console log item will print out

Item { Property1: 'someValue', Property2: 'someValue', Property3: 'someValue'}

I am trying to pass in the variable as a value, such as

<button value={item} onClick={this.onButtonClick}>Click Me!</button>

Supposedly the item I passed into the value is an ItemType, but when I checked the type it becames a string. I tried console logging the type inside the callback function as below

onButtonClick = event => {
  console.log("type checking: " + typeof event.target.value); // Output: type checking: string
}

I don't know why this is happening as I need the variable to be the correct type instead of string. Can anyone explain this issue?

Solution

  • The buttons value attribute is associated with its name when submitting a HTML form, have a read of the prop here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

    To achieve what I believe you want you can try this:

    <button onClick={() => this.onButtonClick(item)}>Click Me!</button>

    You should then have access to the item object inside the onButtonClick method.

    onButtonClick = item => {
   console.log(item)
// output: { Property1: 'someValue', Property2: 'someValue', Property3: 'someValue'}
}