Skip to content

Instantly share code, notes, and snippets.

@scttnlsn
Last active April 21, 2021 23:09
Show Gist options
  • Save scttnlsn/078fc0870753158b43d6 to your computer and use it in GitHub Desktop.
Save scttnlsn/078fc0870753158b43d6 to your computer and use it in GitHub Desktop.
Lispy React components
import React from 'react';
import ReactDOM from 'react-dom';
function html([type, props, ...children]) {
return React.createElement(type, props, ...children.map((child) => {
if (Array.isArray(child)) {
return html(child);
} else {
return child;
}
}));
}
class TextField extends React.Component {
render() {
return html(
['input', { type: 'text',
value: this.props.value,
onChange: this.onChange.bind(this) }]);
}
onChange(e) {
this.props.onChange(e.target.value);
}
}
class App extends React.Component {
constructor() {
super();
this.state = { text: 'Hello' };
}
render() {
return html(
['div', {},
[TextField, { value: this.state.text,
onChange: this.onChange.bind(this) }],
['div', {}, this.state.text]]);
}
onChange(text) {
this.setState({ text });
}
}
ReactDOM.render(
React.createElement(App),
document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment