Radio Button in stateless component in ReactJs

Question

I'm new to react and redux and i want to create component which contain two radio buttons so i write something like this:

import React, { PropTypes } from 'react';

const renderCashRadioButtons = currentCashSelector => (
  <form onClick={currentCashSelector}>
    <input
      type="radio"
      name="cash-transaction"
      value="Transcation"
      onChange={value => currentCashSelector(value)}
    />
    <input
      type="radio"
      name="cash-transfer"
      value="Transfer"
      onChange={value => currentCashSelector(value)}
    />
  </form>
);


const CashRadioButtons = ({ currentCashSelector }) => (
  <div className="container">
    {renderCashRadioButtons(currentCashSelector)}
  </div>
);

CashRadioButtons.propTypes = {
  currentCashSelector: PropTypes.func.isRequired
};


export default CashRadioButtons;

currentCashSelector is a function. When i render this it does not seem to work. The value does not change and i'm not seeing the state to be updated. Do you have any ideas?

I dont think so...i used another radio button component and it worked. But i want to use the default html — RamAlx
– RamAlx, Commented Mar 16, 2017 at 13:37

Derek · Accepted Answer · 2017-03-17 02:02:04Z

1

You probably want your radio buttons to have the same name, so that when one is selected, the other is deselected.
It looks like your onChange functions are expecting the value, but they're actually receiving the event.
You likely have unwanted duplication between the onChange on your form, and the ones on your radio buttons.

Possible Solution

  <form onClick={event => currentCashSelector(event.target.value)}>
    <input
      type="radio"
      name="cash-type"
      value="Transaction"
    />
    <input
      type="radio"
      name="cash-type"
      value="Transfer"
    />
  </form>

edited Mar 17, 2017 at 2:02

answered Mar 17, 2017 at 1:56

Derek

1421 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Radio Button in stateless component in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related