`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.
quisido commented
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>