CODEWITHSUNDEEP
javascriptreactjs
bier hier
bier hier

Reputation: 22580

How to trigger selectchange event on select?

In my stateless component DebtType I am triggering 'handleChangeDebtType' on the onChange event:

const DebtType = (options, handleChangeDebtType) => {
  console.log(options);
  return (
    <select onChange={handleChangeDebtType}>
      {options.options.map(option => {
        return <option>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

This DebtType component is called in MyContainer:

import React, { Component } from "react";
import DebtType from "./DebtType";
import mockOptions from "./mockData.json";
import ClearDebtType from "./ClearDebt";
import { reduxForm } from "redux-form";
import { connect } from "react-redux";

class MyContainer extends Component {
  handleChangeDebtType= () => {
    //save selected debttype to store
    console.log("handleChangeDebtType");
  }

  render() {
    return (
      <div>
        <DebtType
          options={mockOptions.DEBT_TYPE}
          handleChangeDebtType={this.handledChangeDebtType}
        />
        <ClearDebtType options={mockOptions.CLEARDEBT_TYPE} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  //selectedDebtType:
});

MyContainer = connect(
  mapStateToProps,
  undefined
)(MyContainer);

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(MyContainer);

//export default ;

How can I trigger the 'handleChangeDebtType' event? Currently it is not firing.

Upvotes: 1

Views: 79

Answers (2)

Cam Plimsoll
Cam Plimsoll

Reputation: 270

All you forgot to do was add de-structured props to the function component DebtType , in your example the handleChangeDebtType was not being picked up as a function that's why it wasn't firing. Also don't forget to add the key when looping though array.

Link to fixed codesandbox : https://codesandbox.io/s/kkxz980qw5

import React from "react";

const DebtType = ({ options, handleChangeDebtType }) => {
  console.log(options);
  return (
    <select onChange={handleChangeDebtType}>
      {options.map((option, index) => {
        return <option key={index}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

Upvotes: 1

nivendha
nivendha

Reputation: 837

updated the handleChangeDebtType function, minor typo in ur handleChangeDebtType function name

   import React, { Component } from "react";
import DebtType from "./DebtType";
import mockOptions from "./mockData.json";
import ClearDebtType from "./ClearDebt";
import { reduxForm } from "redux-form";
import { connect } from "react-redux";

class MyContainer extends Component {
  handleChangeDebtType = () => {
    //save selected debttype to store
    console.log("handleChangeDebtType");
  };

  render() {
    return (
      <div>
        <DebtType
          options={mockOptions.DEBT_TYPE}
          handleChangeDebtType={() => {
            this.handleChangeDebtType();
          }}
        />
        <ClearDebtType options={mockOptions.CLEARDEBT_TYPE} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  //selectedDebtType:
});

MyContainer = connect(
  mapStateToProps,
  undefined
)(MyContainer);

export default reduxForm({
  form: "simple" // a unique identifier for this form
})(MyContainer);

//export default ;

de-structured the component props

import React from "react";



const DebtType = ({options, handleChangeDebtType}) => {
  console.log(options);
  return (
    <select onChange={handleChangeDebtType}>
      {options.map(option => {
        return <option key={option.label}>{option.label}</option>;
      })}
    </select>
  );
};

export default DebtType;

Upvotes: 2

Related Questions