v1
- by thoughtspile 10/11/202100
disable setup HTML
Setup HTML
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
disable setup JavaScript
Setup JavaScript
const ObjectCmp = () => {
	const [state, setState] = React.useState({ k1: 1, k2: 2, k3: 3, k4: 4, k5: 5 });
  return React.createElement('div', { onClick: () => setState({ ...state, k1: state.k1 + 1 }) }, [
	  React.createElement('input', { key: 0, value: state.k1 }),
	  React.createElement('input', { key: 1, value: state.k2 }),
	  React.createElement('input', { key: 2, value: state.k3 }),
	  React.createElement('input', { key: 3, value: state.k4 }),
	  React.createElement('input', { key: 4, value: state.k5 }),
	]);
};
const LazyObject = () => {
	const [state, setState] = React.useState(() => ({ k1: 1, k2: 2, k3: 3, k4: 4, k5: 5 }));
  return React.createElement('div', { onClick: () => setState({ ...state, k1: state.k1 + 1 }) }, [
	  React.createElement('input', { key: 0, value: state.k1 }),
	  React.createElement('input', { key: 1, value: state.k2 }),
	  React.createElement('input', { key: 2, value: state.k3 }),
	  React.createElement('input', { key: 3, value: state.k4 }),
	  React.createElement('input', { key: 4, value: state.k5 }),
	]);
};
const Atoms = () => {
	const [k1, set1] = React.useState(1);
	const [k2, set2] = React.useState(2);
	const [k3, set3] = React.useState(3);
	const [k4, set4] = React.useState(4);
	const [k5, set5] = React.useState(5);
  return React.createElement('div', { onClick: () => set1(k1 + 1) }, [
	  React.createElement('input', { key: 0, value: k1 }),
	  React.createElement('input', { key: 1, value: k2 }),
	  React.createElement('input', { key: 2, value: k3 }),
	  React.createElement('input', { key: 3, value: k4 }),
	  React.createElement('input', { key: 4, value: k5 }),
	]);
}
const Stateless = () => {
  return React.createElement('div', { onClick: () => {} }, [
	  React.createElement('input', { key: 0, value: 1 }),
	  React.createElement('input', { key: 1, value: 2 }),
	  React.createElement('input', { key: 2, value: 3 }),
	  React.createElement('input', { key: 3, value: 4 }),
	  React.createElement('input', { key: 4, value: 5 }),
	]);
}
delete caserun single casemove downdrag and drop case


ready



ReactDOM.render(React.createElement(ObjectCmp), document.body);
delete caserun single casemove upmove downdrag and drop case


ready



ReactDOM.render(React.createElement(LazyObject), document.body);
delete caserun single casemove upmove downdrag and drop case


ready



ReactDOM.render(React.createElement(Atoms), document.body);
delete caserun single casemove updrag and drop case


ready



ReactDOM.render(React.createElement(Stateless), document.body);
Test Case - click to add another test case
disable teardown JavaScript
teardown JavaScript
ReactDOM.unmountComponentAtNode(document.body)
Output (DOM) - click to monitor output (DOM) while test is running
RUN