CODEWITHSUNDEEP
javascriptreactjs
RRP
RRP

Reputation: 2853

onChange doesn't fire in React component

I have the following component, where I render a list of unordered elements inline and every time there is change in the selection I am trying to update the value in the store

class EditMode extends Component {

  changeComps = (e) => {
    console.log(e.target.value);

  };

  render() {

    let compOptions = this.props.compOptions.map((val, idx) => {
        return (
            <li key={idx} data-key={idx} style={{backgroundColor: this.props.compCheckedVal === idx ? '#30C1C6' : 'white'}}>
                <input type="radio" value={val}  />
                <label htmlFor="">{val === 'No Coverage' ? val.toUpperCase() : val}</label>
            </li>
        )
    });

    return (
        <div className='editDetails'>
            <div className="row">
                <div className="col">
                    {this.props.compDeductTitle}
                </div>
            </div>
            <div className="row">
                <div className="col">
                    <ul onChange={this.changeComps}>
                        {compOptions}
                    </ul>
                </div>
            </div>
            ..........
          </div>)
   }

At moment I am not sure why the onChange event handler does not fire. I don't even see the event being printed out in the console. Am I doing something wrong here?

Upvotes: 0

Views: 1100

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

onChange event will not work with ul element.

Please check here in more details.

compOptions can written in this way,if you want to attach onChange event.

let compOptions = this.props.compOptions.map((val, idx) => {
    return (
        <li key={idx} data-key={idx} style={{backgroundColor: this.props.compCheckedVal === idx ? '#30C1C6' : 'white'}}>
            <input type="radio" value={val} onChange={this.changeComps}  /> //attach onChange here directly
            <label htmlFor="">{val === 'No Coverage' ? val.toUpperCase() : val}</label>
        </li>
    )
});

Upvotes: 1

Related Questions