How can I change form input value in React and Redux?

Question

I'm trying to handle changes in inputs. I know how to do this in React, but now I'm using also Redux and I have no idea how to change values in inputs. When I try to type letters nothing change. Can you tell me what should I do in handleChange and handleSelect functions? Or maybe there is any other solution? Here's my code

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { updateSensor, getSensorData } from '../actions/sensors';

class EditSensorPage extends Component {

  static propTypes = {
    sensorName: PropTypes.string.isRequired,
    sensorCategory: PropTypes.string.isRequired,
    updateSensor: PropTypes.func.isRequired,
    getSensorData: PropTypes.func.isRequired
  }

  handleChange = e => {
    // this.setState({ sensorName: e.target.value })
  }

  handleSelect = e => {
    // this.setState({ sensorCategory: e.target.value })
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log("name: " + this.state.name, "category: " + this.state.category)

    const id = this.props.match.params.id;
    const sensorName = this.props.sensorName;
    const sensorCategory = this.props.sensorCategory;

    // const { sensorName, sensorCategory } = this.state;
    const sensor = { sensorName, sensorCategory };

    this.props.updateSensor(id, sensor);
  }

  componentDidMount() {
    const id = this.props.match.params.id;

    this.props.getSensorData(id)
  }

  render() { 
    return (  
      <div className="col-md-6 m-auto">
      <div className="card card-body mt-5">
        <h2 className="text-center">Edytuj czujnik</h2>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>Nazwa</label>
            <input
              type="text"
              className="form-control"
              name="sensorName"
              onChange={this.handleChange}
              value={this.props.sensorName}
            />
          </div>
          <div className="form-group">
            <label>Kategoria</label>
            <select className="form-control" onChange={this.handleSelect} value={this.props.sensorCategory}>
              <option></option>
              <option value="temperature">Czujnik temperatury</option>
              <option value="humidity">Czujnik wilgotności</option>
            </select>
          </div>
          <div className="form-group">
            <button className="btn btn-primary">Potwierdź</button>
          </div>
        </form>
      </div>
    </div>
    );
  }
}

const mapStateToProps = state => ({
  sensorName: state.sensors.sensorName,
  sensorCategory: state.sensors.sensorCategory,
})

export default connect(mapStateToProps, { updateSensor, getSensorData })(EditSensorPage);

did you set up the redux and store? – nick Jun 04 '20 at 23:44 — nick, Jun 04 '20 at 23:44

score 0 · Answer 1 · answered Jun 04 '20 at 23:50

Assuming you set up the redux actions/function correctly, all you need is the dispatch to fire the redux action.

basically you want to do:

const mapDispatchToProps = dispatch => {
  return {
    updateSensor: data => dispatch(updateSensor(data))
  }
}

Then in your handle Select/handle change function:

/* this would varies depends on how updateSensor is defined. Just make sure 
the function `updateSensor` is returning an action such as
{ type: 'UPDATE_SENSOR', payload: value }
*/

handleChange = event => { 
  this.props.updateSensor({sensorName: event.target.value})
}

You might find this question is useful when trying to get the insight into dispatch and mapDispatchToProps:

What is mapDispatchToProps?

How can I change form input value in React and Redux?

1 Answers1