bier hier bier hier - 1 month ago 7
React JSX Question

How to display state on page in jsx?

I just started looking at react/redux this is my component:

const store = createStore(reducer);

const rootEl = document.getElementById('root')

//render root component
const render = () => ReactDOM.render(

{store.getState()}


<List

addToList={() => store.dispatch(
{
type: 'ADDTEXT',
payload: {
text: 'this is a text'
}
}
)}
/>

,
rootEl
)

//call
render()

//subscribe the store
store.subscribe(render)


I thought I could mix up js with html but the store.getState() gives me this error:

Syntax error: Unexpected token (22:8)

20 | const render = () => ReactDOM.render(
21 |
> 22 | {store.getState()}


How can I display the state on the UI?

Answer

The problem here is simple. JSX doesn't support returning multiple JSX nodes. Read more here.

So put all of this in a single div, and it shall work :)

<div>
  {store.getState()}
  <List addToList={() => store.dispatch({
      type: 'ADDTEXT',
      payload: {
        text: 'this is a text'
      }
    })
  }/>
</div>
Comments