Support state

It’d be great if users could make their designs stateful.

My thinking is that we could do this in a code-oriented way by allowing usage of React hooks like this:

const [ firstName, setFirstName ] = useState('');
const [ lastName, setLastName ] = useState('');

<TextField label="First name" value={name} onChange=(event => setFirstName(event.target.value)} />
<TextField label="Last name" value={name} onChange=(event => setLastName(event.target.value)} />

For this to work, we’d need to treat the last n number of JSX elements as an implicitly returned fragment, i.e. behind the scenes we’d turn it into a component that looks like this:

() => {
  const [ firstName, setFirstName ] = useState('');
  const [ lastName, setLastName ] = useState('');

  return (
    <React.Fragment>
      <TextField label="First name" value={name} onChange=(event => setFirstName(event.target.value)} />
      <TextField label="Last name" value={name} onChange=(event => setName(event.target.value)} />
    </React.Fragment>
  );
};

[ezhikov]

Hi. Since code now transpiled through babel, it’s possible to alter it, so it would be component itself. I coded some solution, that takes user code, wraps it into React.createElement(function () {}) and adds return to jsx code.

const [value, setValue] = React.useState('');

<input value={value} onChange={event => setValue(event.target.value)}/>

is transformed to

React.createElement(function() {
  const [value, setValue] = React.useState('');

  return <input value={value} onChange={event => setValue(event.target.value)}/>
})

I see interesting side-effect of this solution - you don’t need React.Fragment anymore.

Right now solution is fastcoded as PoC, so there is few broken tests. If you interested, I can continue working on it.

[armand1m]

I just got a very simple solution:

In my components file, I export this one line component:

export const FunctionWrapper = ({ children }) => children()

so it allows me to do the following on playroom:

<FunctionWrapper>
  {() => {
    const [state, setState] = React.useState(0);

    return (
      <>
        <p>{state}</p>
        <button onClick={() => setState(prevState => prevState + 1)}>
          Increase
        </button>
      </>
    );
  }}
</FunctionWrapper>