JSFiddle - React, Tailwind, and code Playground

by PauloKlixto

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

// This is a react component that is technically functional,
// but would be very hard to maintain because of it's size.

// It's easier to write tests for smaller components that pass
// data between them. Rewrite this component so that it could be
// rendered from somewhere else by using these lines.

// const checkboxes = [0, 1, 2];

// <Form>
// 	checkboxes.map(id =>
// 		<Checkbox key={id} id={id}/>
// 	)
// </Form>

// or (easier but less impresive)

// <Form checkboxes={checkboxes} />

// <!--  -->

// If you decide to do the second option you MUST STILL create and
// render a Checkbox Component inside the Form Component

class BigForm extends React.Component {
	constructor() {
		super();
		this.state = {
			checked: [false, false, false]
		};
	}
  
  checkboxOnCheck(id) {
		const checked = this.state.checked.map((value, index) => {
			if(id === index) {
				return !value;
			}
			return value;
		});

		this.setState({ checked });
	}

	render() {
  	const checked = this.state.checked
		return (
			<div className="form">
        <span>Checked boxes: {checked}</span>
				{ this.props.children }
			</div>
		)
	}
}

class Checkbox extends React.Component {
	constructor() {
		super();
  }
  
  render() {
  	const { key } = this.props
		return (
        <div className="checkbox-wrapper">
				  <span>checkbox {key}</span>
				  <input value={false} type="checkbox" />
				</div>
		)
	}
}
const test = [ 0, 1, 2 ];

ReactDOM.render(
  <BigForm>
    <Checkbox key={0} />
  </BigForm>,
  document.getElementById('container')
);