title: Error: Objects are not valid as a React child (found: object with keys {})
body: <p>I'm a beginner learning ts for the first time. Thank you in advance for sharing your knowledge. I am making a to-do list. I used to react to complete it. But now I am using react and typescript together to complete the code.
  I got an error. I don't know what the problem is. Help me, please.</p>
  <p><code>Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.</code></p>
  <p><a href="https://i.stack.imgur.com/Bq7tp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bq7tp.png" alt="enter image description here" /></a></p>
  <p>Click <a href="https://github.com/eunjin0212/React-ToDoList.git" rel="nofollow noreferrer">here</a> to view the full code</p>
  <p>What I think that the problem is this file.</p>
  <p>// contet.tsx</p>
  <pre><code>import React, { createContext, useReducer, useContext, Dispatch } from 'react';
  import reducer from &quot;./reducer&quot;;
  import { Action } from './actions'
  
  export interface ITodo {
    id: string;
    text: string;
  };
  
  export interface State {
    toDos: ITodo[];
    completed: ITodo[];
  }
  
  interface ContextValue {
    state: State;
    dispatch: Dispatch&lt;Action&gt;;
  }
  export const initialState = {
    toDos: [],
    completed: [],
  };
  
  const ToDosContext = createContext&lt;ContextValue&gt;({
    state: initialState,
    dispatch: () =&gt; { console.error(&quot;called dispatch outside of a ToDosContext Provider&quot;) }
  });
  
  export const ToDosProvider = ({ children }: { children: React.ReactNode }) =&gt; {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      &lt;ToDosContext.Provider value={{ state, dispatch }}&gt;
        {children}
      &lt;/ToDosContext.Provider&gt;
    );
  };
  
  export const useTodosState = (): State =&gt; {
    const { state } = useContext(ToDosContext);
    return state;
  };
  
  export const useTodosDispatch = (): Dispatch&lt;Action&gt; =&gt; {
    const { dispatch } = useContext(ToDosContext);
    return dispatch;
  };
  </code></pre>
  <p>This is App.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  import Add from &quot;./Add&quot;;
  import Title from &quot;./Title&quot;;
  import Progress from &quot;./Progress&quot;;
  import List from &quot;./List&quot;;
  import ToDo from &quot;./ToDo&quot;;
  import styled from &quot;styled-components&quot;;
  import { useTodosState } from '../context';
  
  const App = () =&gt; {
    const { toDos, completed } = useTodosState();
    console.log(toDos);
    return (
      &lt;Title&gt;
        &lt;Add /&gt;
        &lt;Progress /&gt;
        &lt;Lists&gt;
          &lt;List title={toDos.length !== 0 ? &quot;To Dos&quot; : &quot;&quot;}&gt;
            {toDos.map((toDo) =&gt; (
              &lt;ToDo key={toDo.id} id={toDo.id} text={toDo.text} isCompleted={false} /&gt;
            ))}
          &lt;/List&gt;
          &lt;List title={completed.length !== 0 ? &quot;Completed&quot; : &quot;&quot;}&gt;
            {completed.map((toDo) =&gt; (
              &lt;ToDo key={toDo.id} id={toDo.id} text=
                {toDo.text} isCompleted /&gt;
            ))}
          &lt;/List&gt;
        &lt;/Lists&gt;
      &lt;/Title &gt;
    )
  }
  export default App;
  </code></pre>