CODEWITHSUNDEEP
reactjsredux
Simon Breton
Simon Breton

Reputation: 2876

How Can I solve my "Objects are not valid as a React child" issue?

I've build the following example to learn about react/redux. Here is the reducer I have :

const tableFilter = (state = 0, action) => {
    if(action.type === 'SET_TABLE_DATA') {
        return state + 1;
    }
        return state;
  }

At that point everything works fine. However I'm trying to follow this tutorial APPLYING REDUX REDUCERS TO ARRAYS and when updating my reducer with the following code :

//========Reducer===================
const INITIAL_STATE = {
  value: 0,
  warning: false
}
const update = (state, mutations) => Object.assign({}, state, mutations)
const tableFilter = (state = INITIAL_STATE, action) => {
  if(action.type === 'SET_TABLE_DATA') {
    return state = update(state, { value: state.value + 1 })
  }
  return state;
}
const FilterApp = combineReducers({tableFilter});
//==================================

const DisplayTable = ({test, DisplayTable}) => {
  return (
    <div>
      <button onClick={DisplayTable}>{test}</button>
      <p></p>
    </div> 
  )
}

function mapStateToProps(state) {
  return {
      test: state.tableFilter
  };
};

const mapDispachToProps = (dispatch) => {
  return {
    DisplayTable: () => {
      dispatch (setTableFilter());
    }
  };
};

const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable);
ReactDOM.render(
  <Provider store={createStore(FilterApp)}>
    <App />
  </Provider>,
  document.getElementById('root')

I've got this error ...Objects are not valid as a React child (found: object with keys {value, warning})....

Looking at others questions here it seems to be a recurrent issue, however the solution is always different. What does this error message really mean ? how can I solve it in my case ? Is there something I need to modify in my component ?

here is my JSBin with the updated reducer.

thanks

Upvotes: 1

Views: 1225

Answers (1)

r0dney
r0dney

Reputation: 745

You're trying to render an object directly in JSX and that just isn't allowed. 

<button onClick={DisplayTable}>{test}</button>

Here test is an object, not a valid React child. Try

<button onClick={DisplayTable}>{String(test.warning)} {test.value}</button>

Updated JSBIN

Upvotes: 6

Related Questions