How to get the value using react-rating component in my form?

Question

I'm using React Rating (https://github.com/dreyescat/react-rating) and I'm not sure how to use get the value for my ratings. All of my other fields are working. I put in a console.log to see that their values have changed.

When I try to click on a star to rate the facility, I get the following error:

TypeError: undefined is not an object (evaluating 'event.target.name')

and it points to this line in my code:

formState[event.target.name] = event.target.value;

I know that I'm not targeting the Rating component correctly. I'm totally stumped. I haven't finished my button's onClick yet so I'm not worried about that.

Here is my code:

var Rating = require('react-rating')

class Assignment extends Component {

  constructor(props) {
    super(props)
    this.state = {
      form: {
        site: '',
        facilityRate: '',
        theList: 'off'
      }
    }
  }

  handleChange(event) {
    const formState = Object.assign({}, this.state.form);
    formState[event.target.name] = event.target.value;
    this.setState({ form: formState });
    console.log(formState);
  }

  render() {
    return (

      <Grid>
        <PageHeader id='header'>
          Track your assignment <small className='subtitle'>Let us make a record of your assignment.</small>
        </PageHeader>

        <form id='assignment-form'>

          <h3>Record your assignment</h3>

          <Row>
            <Col xs={5} md={5}>
              <FormGroup>
                <ControlLabel id='site'>Site Name</ControlLabel>
                <FormControl type='text' name='site'
                  onChange={this.handleChange.bind(this)}
                  value={this.state.form.site}
                />
              </FormGroup>

              <FormGroup>
                <ControlLabel id='facilityRate'>Rate the Facility
                          </ControlLabel><br />
                <Rating
                  name='facilityRate'
                  emptySymbol={<img src='../star-empty.png' className='icon' alt='empty star' />}
                  fullSymbol={<img src='../star-full.png' className='icon' alt='filled star' />}
                  onChange={this.handleChange.bind(this)}
                  value={this.state.form.facilityRate} />
              </FormGroup>

              <FormGroup>
                <ControlLabel id='theList'>The List
                          <br /><i>Add it to my favorites.</i>
                </ControlLabel><br />
                <Checkbox
                  name='theList'
                  checked={this.state.theList}
                  onChange={this.handleChange.bind(this)}>Add to The List
                            </Checkbox>
              </FormGroup>
            </Col>
          </Row>

          <Row>
            <Col xs={5} md={5}>
              <Button type='submit' className='btn btn-secondary' id='submit'>Submit Assignment</Button>
            </Col>
          </Row>


        </form>
      </Grid>
    );
  }
}

score 0 · Accepted Answer · answered Apr 03 '18 at 05:18

0

You should call onChange on <Rating /> as mentioned in documentation. So your component should look like this:

<Rating name='facilityRate' 
emptySymbol={<img src='../star-empty.png' className='icon' alt='empty star' />}
fullSymbol={<img src='../star-full.png' className='icon' alt='filled star' />} 
onChange={this.handleRatingChange} 
value={this.state.form.facilityRate} />

And in your handleRatingChange function you will get the value as:

handleRatingChange(value) {
    console.log(value);
    //here set your state for rating
}

answered Apr 03 '18 at 05:18

Triyugi Narayan Mani

2,453
8
20
45

Thanks! I got the value and see it in console, but now I'm stuck on how to set state in the form for facilityRate. – Kathy Apr 04 '18 at 01:51
@Kathy I think you got the answer here [How to set state of the value when using react-rating component in my form?](https://stackoverflow.com/questions/49641679/how-to-set-state-of-the-value-when-using-react-rating-component-in-my-form) – Triyugi Narayan Mani Apr 04 '18 at 05:01

How to get the value using react-rating component in my form?

1 Answers1