Skip to content

Instantly share code, notes, and snippets.

@smykes
Created December 30, 2016 23:33
Show Gist options
  • Save smykes/92b80409a23dc163cf6e6b4a0e9c4c24 to your computer and use it in GitHub Desktop.
Save smykes/92b80409a23dc163cf6e6b4a0e9c4c24 to your computer and use it in GitHub Desktop.
React Question
import React, { Component } from 'react';
import ToggleBox from '../components/ToggleBox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
total : 60,
count: 0
};
}
getToggles() {
let toggles = [];
for (let i = 0; i < this.state.count; i++) {
toggles.push(<ToggleBox checked={false} key={i} />);
}
return toggles;
}
render() {
let toggles = this.getToggles();
return (
<div className="App">
{{this.state.count}} - {{this.state.total}}
<div className="container-toggle-box">
{toggles}
</div>
</div>
);
}
}
export default App;
import React, {Component} from 'react';
class ToggleBox extends Component {
constructor(props) {
super(props);
this.state = {
active = this.props.checked
};
this.handleClick= this.handleClick.bind(this);
}
handleClick() {
this.setState({active: (this.state.active) ? false : true}
}
render() {
let mark = (this.state.active) ? 'x' : 'o'
return (
<span>
{mark}
</span>
);
}
}
export default ToggleBox;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment