Snažím se to vyřešit jednoduše klepněte na tlačítko akce , jsem pomocí třídy založené komponenty a já vázané metody a používá se "to" podle dokumentace, ale dojde k chybě, říkám, že nelze přečíst vlastnosti handleCategory , tady je můj kód
import React from 'react';
import classes from '../css/Landing.module.css';
import mainClasses from '../../MainCss/MainClasses.module.css';
import { LOAD_CATEGORIES } from '../../graphql/queries';
export default class Landing extends React.Component {
constructor(props) {
super(props);
this.state = {
categories: [],
loading: true,
category: null,
};
this.handleCategory = this.handleCategory.bind(this);
}
async componentDidMount() {
const { client } = this.props;
const { data } = await client.query({ query: LOAD_CATEGORIES });
const { categories } = data;
this.setState((prevState) => ({ ...prevState, categories: categories, loading: false, category: categories[0]?.name }));
}
handleCategory(e) {
this.setState((prevState) => ({ ...prevState, category: e.target.value }));
}
renderCategory(category) {
return (
<option onClick={this.handleCategory} key={category.name} value={category.name}>
{category.name}
</option>
);
}
render() {
return (
<div className={`${classes.root} ${mainClasses.container} ${mainClasses.column}`}>
<div className={`${mainClasses.container} ${mainClasses.row}`}>
<label className={classes.categorylabel}>Choose Category</label>
{this.state.loading ? 'loading' : <select className={classes.categorymenu}>{this.state.categories.map(this.renderCategory)}</select>}
</div>
<div>{this.state.category}</div>
</div>
);
}
}