CharlesStover/reactn

`withGlobal` example is not working

Ajaxy opened this issue · 1 comments

Ajaxy commented

Hi there.

I just copied some code examples from the README and I can not make it work with withGlobal. Component never gets re-rendered.

I have two files (copied from the README as-is):

index.jsx

import React, { setGlobal } from 'reactn';
import ReactDOM from 'react-dom';
import App from './App';

// Set an initial global state directly:
setGlobal({
  value: 0,
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

App.jsx

import React, { withGlobal } from 'reactn';

// A button that displays the value and, when clicked, increments it.
function MyComponent(props) {
  return (
    <>
      My value is{' '}
      <button
        onClick={props.incrementValue}
        value={props.value}
      />
    </>
  );
}

export default withGlobal(
  // Set the `value` prop equal to the global state's `value` property.
  global => ({
    value: global.value
  }),

  // Important Note: This is not the setGlobal helper function.
  // Set the `incrementValue` prop to a function that increments the global
  //   state's `value` property.
  setGlobal => ({
    incrementValue: () => {

      // Important Note: This is not the setGlobal helper function.
      // This is the parameter referenced 4 lines up.
      setGlobal(global => ({
        value: global.value + 1
      }));
    }
  })
)(MyComponent);

The button does not display the initial value. Clicking on the button produces no effect.

I also tried the previous versions of react, react-dom and reactn with no luck.

Thanks for trying out ReactN and for the minimum reproduction! I was able to reproduce this thanks to your thorough code contribution.

<button> does not take the value prop. Use this JSX for button instead:

<button onClick={props.incrementValue}>
  {props.value}
</button>