How to display state on page in jsx?

Question

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?

maybe you put it in codepen and give us a link? – devellopah Oct 08 '16 at 23:38 — devellopah, Oct 08 '16 at 23:38

score 2 · Accepted Answer · answered Oct 09 '16 at 07:52

2

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>

answered Oct 09 '16 at 07:52

Ateev Chopra

1,026
2
15
32

Ok the error is gone but now I get: invariant.js:38 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons? – bier hier Oct 09 '16 at 08:08
That is a different problem. If you are creating elements in an array, React requires you to pass an attribute `key`, which has to be unique. So just pass the `key` from the key-value pair. Read this: http://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js – Ateev Chopra Oct 09 '16 at 08:13

How to display state on page in jsx?

1 Answers1