CODEWITHSUNDEEP
javascriptreactjs
n0bodySp3cial
n0bodySp3cial

Reputation: 43

Handle <select> component change in a ReactJS form

ReactJS n00b, trying to build a simple, reusable < select > component in ReactJS with an onClick callback. I'm not getting any console or webpack errors, but nothing is happening when I change the selected option.

Caster.js

import React from 'react';
import ReactDOM from 'react-dom';
import { SelectSchool } from './SelectSchool';
import { Button } from './Button';

export class Caster extends React.Component {
    constructor(props) {
        super(props);
        ...
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
      console.log('handleChange'); // TEST - nothing appears in console

      var value = e.target.value;
      this.setState({casterSchool: value});
      this.props.select(value);

      console.log('value: ' + value); // TEST - nothing appears in console
    }

    render() {
        return (
            <div className="instance-wrap">
                <div className="input-row">
                    <SelectSchool phaseSelect="select-caster" onChange={this.handleChange} />
                     ...
                </div>  
            </div>
        );
    }
}

SelectSchool.js

import React from 'react';
import ReactDOM from 'react-dom';

export class SelectSchool extends React.Component {
    render() {
        return (
            <div className="input-wrap">
                <label>School</label>
                <select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.handleChange}>
                    <option value='alteration'>Alteration</option>
                    ...
                    <option value='divination'>Divination</option>
                </select>
            </div>
        );
    } 
}

SelectSchool.defaultProps = { phaseSelect: 'default' };

Any help or advice is greatly appreciated.

Upvotes: 1

Views: 1120

Answers (1)

Dekel
Dekel

Reputation: 62536

The name of the prop that you pass to the <SelectSchool in your example is onChange but inside the component you are trying to access this.props.handleChange (there is no such prop).

You should use this.prop.onChange or pass the handleChange={this.handleChange} to the component.

Option 1:

<select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.onChange}>

Option 2:

<SelectSchool phaseSelect="select-caster" handleChange={this.handleChange} />

Upvotes: 2

Related Questions