title: Filtering content with radio buttons in React
body: <p>I am getting this error, but I thought this pertains to binding functions improperly.</p>
  
  <blockquote>
    <p>Uncaught TypeError: this.seState is not a function</p>
  </blockquote>
  
  <p>Essentially I have some data that I would like to filter using radio buttons. </p>
  
  <p>Selecting a button of a particular value should only cause those objects with that value as their property to be rendered.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { Card, Select, Segment, Container, Divider, Grid, Header, Image } from 'semantic-ui-react';
  import '../css/app.css';
  
  class FilterOptions extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: this.props.data,
        priority: '',
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
      var val = e.target.value;
      this.setState({ priority: val });
      this.props.changeOption(val);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;label&gt;
                &lt;input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} /&gt;
                1
              &lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;
                &lt;input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} /&gt;
                2
              &lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;
                &lt;input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} /&gt;
                3
              &lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label&gt;
                &lt;input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} /&gt;
                4
              &lt;/label&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function FilterUsers(props) {
    return (
      &lt;Container&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;Grid columns={3} doubling stackable&gt;
          {props.data.map((user) =&gt; (
            &lt;Grid.Column key={user.name}&gt;
              &lt;Segment&gt;
                &lt;Card&gt;
                  &lt;Card.Content&gt;
                    &lt;Card.Header&gt;
                      &lt;h2&gt;name: {user.name}&lt;/h2&gt;
                    &lt;/Card.Header&gt;
                    &lt;Card.Meta&gt;
                      &lt;span className="card__age"&gt;age: {user.age}&lt;/span&gt;
                    &lt;/Card.Meta&gt;
                    &lt;Card.Description&gt;priority: {user.priority}&lt;/Card.Description&gt;
                    &lt;Card.Description className="card__catergory"&gt;category: {user.category}&lt;/Card.Description&gt;
                  &lt;/Card.Content&gt;
                &lt;/Card&gt;
              &lt;/Segment&gt;
            &lt;/Grid.Column&gt;
          ))}
        &lt;/Grid&gt;
      &lt;/Container&gt;
    );
  }
  
  export default class SortAndFilterForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: this.props.data,
        priority: '',
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(val) {
      this.setState({ priority: val });
      // var filteredByPriority = this.props.data.sort((a, b) =&gt; a.priority - b.priority);
      var filteredByPriority = this.props.data.filter(function(item) {
        return item.priority === val;
      });
      this.seState({ data: filteredByPriority });
      console.log(filteredData, val);
    }
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Sorts&lt;/h1&gt;
          &lt;FilterOptions data={this.state.data} changeOption={this.handleChange} /&gt;
          &lt;FilterUsers data={this.state.data} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Any help would be appreciated!</p>