I am getting this error, but I thought this pertains to binding functions improperly.
Uncaught TypeError: this.seState is not a function
Essentially I have some data that I would like to filter using radio buttons.
Selecting a button of a particular value should only cause those objects with that value as their property to be rendered.
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 (
<div>
<ul>
<li>
<label>
<input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} />
1
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} />
2
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} />
3
</label>
</li>
<li>
<label>
<input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} />
4
</label>
</li>
</ul>
</div>
);
}
}
function FilterUsers(props) {
return (
<Container>
<br />
<br />
<Grid columns={3} doubling stackable>
{props.data.map((user) => (
<Grid.Column key={user.name}>
<Segment>
<Card>
<Card.Content>
<Card.Header>
<h2>name: {user.name}</h2>
</Card.Header>
<Card.Meta>
<span className="card__age">age: {user.age}</span>
</Card.Meta>
<Card.Description>priority: {user.priority}</Card.Description>
<Card.Description className="card__catergory">category: {user.category}</Card.Description>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
))}
</Grid>
</Container>
);
}
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) => 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 (
<div>
<h1>Sorts</h1>
<FilterOptions data={this.state.data} changeOption={this.handleChange} />
<FilterUsers data={this.state.data} />
</div>
);
}
}
Any help would be appreciated!
Change line from
this.seState({ data: filteredByPriority });
to
this.setState({ data: filteredByPriority });
Seems like a typo error. It's this.setState
not this.seState
.
Change it to: this.setState({ data: filteredByPriority });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.