Breaking News: Grepper is joining You.com. Read the official announcement!

Error: Objects are not valid as a React child (found: object with keys {counter}). If you meant to render a collection of children, use an array instead.

Lokesh003 answered on December 25, 2021 Popularity 10/10 Helpfulness 1/10

answer Error: Objects are not valid as a React child (found: object with keys {counter}). If you meant to render a collection of children, use an array instead.

related If you meant to render a collection of children, use an array instead.

related Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Error: Objects are not valid as a React child (found: object with keys {counter}). If you meant to render a collection of children, use an array instead.

Comment

implemented a counter with increment, decrement and reset buttons and I was 
trying to display the count on to the screen but I was the above mentioned 
error.

In the code I had declared the count which is returned by useReducer hook as 
the object and I was directly trying to return it rather than the count 
property of it

I should actually return count.count and I was returning count only (object 
itself) not property.

We can stringify object and return the string also.

import React, { useReducer } from "react";

const initialState = {
count:0,
}
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return {count:state.count + 1}
        case 'decrement':
            return {count:state.count - 1}
        case 'reset':
            return initialState
        default:
            return state
    }
}

function CounterWithReducer(props) {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={()=>{dispatch({type:'increment'})}}>Increment</button>

      <button onClick={()=>{dispatch({type:"decrement"})}}>Decrement</button>
      <button onClick={()=>{dispatch({type:"reset"})}}>Reset</button>
    </>
  );
}

export default CounterWithReducer;
In the above code {count} This section (in the return part ) is where I did the
mistake instead of count I need to use count.count

Summary is that if you trying to show object on to screen you can't either use 
JSON.stringify() or try to display any property of the object.

Popularity 10/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: object render typescript

Link to this answer
Share Copy Link

Contributed on Dec 25 2021

Lokesh003

0 Answers Avg Quality 2/10

Closely Related Answers

If you meant to render a collection of children, use an array instead.

Comment

const obj = { foo: 1, bar: 2 };
export default function App() {
  return <div className="App">{JSON.stringify(obj)}</div>;
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: thewebdev.info

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 29 2022

ah MED

0 Answers Avg Quality 2/10

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Comment

return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {homes.map(home => <div>{home.name}</div>)}
    </div>
  );

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: render re

Link to this answer
Share Copy Link

Contributed on May 08 2022

Mappy Show

0 Answers Avg Quality 2/10

Error: Objects are not valid as a React child (found: object with keys {counter}). If you meant to render a collection of children, use an array instead.

Contents

More Related Answers

Error: Objects are not valid as a React child (found: object with keys {counter}). If you meant to render a collection of children, use an array instead.

Closely Related Answers

If you meant to render a collection of children, use an array instead.

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.