React Checkbox & Select onChange

Question

I've read plenty of question on this subject & gone over the documentation for React as well, but I'm still no wiser this. I cannot get an input field to emit anything (an event) on click or change.

My code is below and other than using materialzecss, I'm using basic HTML/JSX & no other javascript.

I'm simply unable to update the input to toggle between checked/not-checked on either onChange or onClick. Can anybody tell me where I'm going wrong here?

import React, { Component } from 'react'
import Alert from '../components/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class Create extends Component {
  constructor(){
    super()
    this.state = {
      redirect:false,
      alert:{
        show: false
      },
      checked:true
    }
  }

  handleChange(event) {
    this.setState({
      recipe : {[event.target.name]: event.target.value}
    })
    console.log(this.state);

  }

  handleSubmit(event) {

  }


  render() {
    const { redirect } = this.state;
    const showAlert = this.state.alert.show;
     if (redirect) {
       return <Redirect to='/'/>;
     } else if (showAlert) {
        console.log("alert");
     }
    return (
      <div className="row">
        {showAlert ? <Alert /> : ''}
        <div className="container">
          <div className="row">
              <div className="col s10 offset-s1  z-depth-1" id="loginForm">
              <h5 className="red darken-4" id="title">Create New Recipe</h5>
              <form >
                <div className="input-field" id="username" >
                  <input type="text" className="validate" name="name"
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="name">Name</label>
                </div>
                <div className="input-field" id="password">
                  <input type="text" className="validate" name="intro" 
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="password">Intro</label>
                </div>
                <div className="input-field" id="password">
                  <textarea id="textarea1" className="materialize-textarea" name="body" 
                  onChange={this.handleChange.bind(this)}>
                  </textarea>
                  <label htmlFor="textarea1">Recipe</label>
                </div>
                <div className="row">
                  <div className="input-field col s12 m5" id="password">
                    <Serves function={this.handleChange.bind(this)}/>
                    <label>Serves</label>
                  </div>
                  <div className="input-field col s12 m5" id="test">
                    <select name="cuisine" defaultValue="2" onChange={(e)=>{console.log(e)}}>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                    <label>Cuisine</label>
                  </div>
                </div>
                <div className="input-field" id="password">
                  <input type="checkbox" className="filled-in" id="filled-in-box"/>
                  <label htmlFor="filled-in-box">Public?</label>
                </div>
              <button type="submit" className="waves-effect waves-light btn red darken-4" id="loginbtn">Login</button>
              <a href="/app/dashboard" className="waves-effect waves-light btn amber darken-1" id="loginbtn">Back</a>
            </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Create;

const Serves = (props) => {
  return(
    <select onChange={props.function} name="serves" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="9">10</option>
    </select>
  )
}

Solution

You need to add the checked attribute to the input field and set it equal to the state property you are changing

add this method:

handleCheckClick = () => {
  this.setState({ checked: !this.state.checked });
}

and change the checkbox jsx:

<input type="checkbox" checked={this.state.checked} onChange={this.handleCheckClick} className="filled-in" id="filled-in-box"/>

Comments

[crumbug]

your checkbox input doesn't have an onChange handler

[Chris Hurst]

Thanks but I still don't get anything from this. I can't even get an alert or a console log to happen.

[Chris Hurst]

Thanks for the reply but I juts get 'stateless component cannot have refs'

[Andrew Heekin]

does this help? codepen.io/andrewheekin/pen/qodRrj?editors=1010

[Chris Hurst]

Got it :) Thanks for the help!