score:1
Accepted answer
i'd suggest using just one handler function and generate your links with bindings.
import react, { component, proptypes } from 'react';
class sizes extends component {
constructor(props) {
super(props);
this.state = {
xxs: false,
xs: false,
s: false,
sm: false,
m: false,
l: false,
xl: false,
xxl: false,
};
this.sizes = ['xxs', 'xs', 's', 'sm', 'm', 'l', 'xl', 'xxl'];
}
toggleonoff(size) {
this.setstate({
[size]: !this.state.size
});
}
render() {
let xxs = this.state.xxs ? 'on' : '' ;
xxs += ' filter-filtersize-xxs' ;
let xs = this.state.xs ? 'on' : '' ;
xs += ' filter-filtersize-xs' ;
let s = this.state.s ? 'on' : '' ;
s += ' filter-filtersize-s' ;
let sm = this.state.sm ? 'on' : '' ;
sm += ' filter-filtersize-sm' ;
let m = this.state.m ? 'on' : '' ;
m += ' filter-filtersize-m' ;
let l = this.state.l ? 'on' : '' ;
l += ' filter-filtersize-l' ;
let xl = this.state.xl ? 'on' : '' ;
xl += ' filter-filtersize-xl' ;
let xxl = this.state.xxl ? 'on' : '' ;
xxl += ' filter-filtersize-xxl' ;
return (
<div
classname='filter-filtersize-buttons'
>
{
this.sizes.map((size) => {
const toggleonoff = this.toggleonoff.bind(this, size);
return (
<a href="#" classname={[size]} onclick={toggleonoff}>{size}</a>
)
})
}
</div>
);
}
}
export default sizes;
i did not test this, but this should fix your project.
score:1
i'm sort of trying to divine through the missing code, but i believe that last line should be: this.setstate(state);
togglestate(key) {
let state = {};
state[key] = !this.state[key];
this.setstate(state);
}
// or, more simply:
togglestate(key) {
this.setstate({[key]: !this.state[key]});
}
Source: stackoverflow.com
Related Query
- Passing several arguments into react component
- Passing an empty function into a React component
- Passing arguments from child component React
- Passing both match param and props into react component when using routing
- Passing props into React component
- Passing data from an Asp.Net view into a React Component
- React passing data into another component
- Map function not working while passing props into React component (TypeScript, React and Next.js)
- passing arguments into React components
- Syntactic Sugar for passing React props with the same key and value into component
- Passing arguments to React component using ES6
- Passing HTML element into React Component before Element is Rendered
- Passing the value of a clicked element in a child component into a button in a parent component in react via state lifting not working
- Passing data into component from React Router
- Passing memoized function down into React Component as a prop causes Typescript error which I can't fix
- Passing a class into a React component so that it can create new instances of said class?
- React JS passing data from firebase into props for my component
- Passing data into a React component within existing app
- I want to understand why the data i am passing as props into the React functional component is showing as undefined?
- React hooks array passing in number when passed into props of component
- Passing array into React stateless component
- How to pass in a react component into another react component to transclude the first component's content?
- Inserting the iframe into react component
- Is there a right way to pass data into a React component from the HTML page?
- React TypeScript HoC - passing Component as the prop
- Passing props into external stylesheet in React Native?
- Turning an SVG string into an image in a React component
- Passing multiple props to React component
- Passing props to component in React Router 4
- How to render React Component into itself, in a recursive way
More Query from same tag
- React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function
- Can't throttle function with useState hook
- Changing React button text upon Login/Logout
- What makes React.memo unreliable for preventing renders?
- React - event.target.getAttribute("id") returns null on IE11
- Access props inside the styled component using MUI
- React useEffect not behaving as expected
- How to access the value from set-cookie in React?
- Axios having CORS issue
- How to pass headers in axios as secret-key
- How to pass data from child component to parent component?
- Display the specfied list in frontend
- Why after onClick my state is undefined ? [Hook, React]
- Search by name or ID with Material UI autocomplete
- Create an precise amount of ref after rerender
- dispatch action outside component in react-sweet-state
- ScrollTop not working in React Component or inspector
- How to Change pre filled input values
- Too many re-renders. React limits the number of renders to prevent an infinite loop. UI and conole error
- How to render multiple component in reactjs, what i'm doing wrong?
- Toggle one list item at a time with React/TS functional components
- The React.js route in the component must call other components depending on the URL
- React-Google-Map multiple Info window open
- Upload image in react does not return form data values
- Loading gif fades out before the image completely loads, why is that?
- HandleClick not changing the state
- How can i get a ref to show me its pageYOffset?
- Google chart range selector chart type as column chart
- React Router v6 useNavigate() doesn't navigate if replacing last element in path
- Adding React-Window to Material-UI Enhanced Table: type is invalid -- expected a string or a class/function but got: array