score:1
Accepted answer
class App extends Component {
constructor(props) {
super(props);
this.state = {
checkboxes: {
cheese: false,
lettuce: false,
tomatoe: false
}
};
}
handleChange = e => {
const checkboxId = e.target.id;
this.setState({
checkboxes: {
...this.state.checkboxes,
[checkboxId]: !this.state.checkboxes[checkboxId]
}
});
};
render() {
return (
<div>
{Object.entries(this.state.checkboxes).map(([key, val]) => {
return (
<div key={key}>
<input
type="checkbox"
checked={val}
id={key}
onChange={this.handleChange}
/>
<label>
{key}
</label>
</div>
);
})}
</div>
);
}
}
score:1
const Checkboxes = React.createClass({
getInitialState: function () {
return {
checkbox1: false,
checkbox2: false,
checkbox3: false
};
},
selectCheckbox: function (checkboxNr) {
// return a callback with the checkboxNr set
return () => {
this.setState({
[checkboxNr]: !this.state[checkboxNr]
});
}
},
render: function () {
const {checkboxes1, checkboxes2, checkboxes3} = this.state;
return (
<div>
<input type="checkbox" checked={checkboxes1} onChange={ this.selectCheckbox("checkbox1") } />
<input type="checkbox" checked={checkboxes2} onChange={ this.selectCheckbox("checkbox2") } />
<input type="checkbox" checked={checkboxes3} onChange={ this.selectCheckbox("checkbox3") } />
</div>
);
}
});
score:3
render: function () {
return (
<div>
{this.state.checkboxes.map((c, i) => {
return (
<input key={i} type="checkbox" checked={c} onChange={() => this.selectCheckbox(i)} />
);
})}
</div>
);
}
Source: stackoverflow.com
Related Query
- Simplifying repeated code in React
- Reduce lines of repeated code in React with Styled Components
- React - Simplifying the code inside the return
- Using mixins vs components for code reuse in Facebook React
- syntax highlighting for react code in sublime
- why we cannot pass boolean value as props in React , it always demands string to be passed in my code
- How to find dead code in a large react project?
- Formatting code with <pre> tag in React and JSX
- Auto Import of React Components in Visual Studio Code
- How to make vs code autocomplete React component's prop types?
- When testing, code that causes React state updates should be wrapped into act
- Jest "No tests found, exiting with code 1" error on Windows 10 in React Redux application
- React app exiting in docker container with exit code 0
- React intellisense in Visual Studio Code
- React + backend - project structure when sharing code
- Can we share code between react webapp and react native app and is react-native production ready
- Trying to use emmet with a react app in vs code
- Code Coverage on React with Puppeteer + Istanbul
- how to get code coverage in react with react testing library
- css pseudo code "li::before" in react inline style
- How to get code completion for typed react component properties?
- How to get country code and Country name using IP in react js
- Why Code Coverage in react app is empty? Tried using npm run test -- --coverage. But always showing empty code coverage
- Setting up proper React Code highlighting in Visual Studio Code?
- Ascii/HTML character code doesn't work within React variable
- Calling a Android Native UI component method from React native Js code
- View the source code of a website built with React
- Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2
- Editing code of react npm modules in node module folder
- React Native "The expo SDK requires Expo to run. .... this code is not running on Expo."
More Query from same tag
- Conditional Rendering,use-timeout Invalid hook call React
- Is it possible to pass parameters from react Route tag to Navigate tag?
- Immutable.js deleteIn not working
- Can't create a class from module in React
- setTimeout in react setState
- Material Ui Grid doesn't scale properly
- React: Changing prop type value for nested component on page level
- do not extend React.Component
- How to populate an array before conditional render which is based on the length of the array?
- Next.js - Head element doesn't work
- Convert Excel to JSON - using React-Dropzone (client side probably)
- Exception not thrown inside save saga
- In react, trouble passing onClick from Marker in Google Maps to app.js
- React: Execute a Function as many times as it is called
- React Redirect with a parameter
- MaterialUI text fade with useEffect and setInterval
- Canvas draw points localized to clicked area after scale, rotate and translation
- You may need an additional loader to handle the result of these loaders error with CRA
- Error when importing IdleTimer from 'react-idle-timer'
- Getting error in browser - Failed to register a ServiceWorker for scope
- Align Absolute Position on Top Center in CSS/Styled Components
- FCM React.js/Node npm: TypeError: Cannot assign to read only property 'toJSON' of object 'Error'
- Star-rating component logic implementation in react
- ReactJS: Getting 404 when a /about page is opened
- Correct way to make single conditional call to React Hooks' useFetch function?
- Toggle visibility of two components from buttons inside of them in React
- Module not found: Error: Cannot resolve module 'routes'
- How do I reference another field in mongoDB Schema instead of ObjectID?
- Routing from a react app to get a server side rendered HTML generated from handlebars
- Opened my React Native project in Xcode, where is my code?