title: React - syntax confusion to clarify
body: <p>I appreciate your help in getting me out of the mess i get into. I am very new to REACT and obviously tripping on some basic concepts.. Appreciate your kind help.</p>
  <p>This is my app.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import TodoItem from &quot;./components/TodoItem&quot;;
  import todosData from &quot;./components/todosData&quot;
  
  function App() {
  
    const todoComponents = todosData.map((todo) =&gt; (
      &lt;TodoItem  key={todo.id} todo={todo.text} /&gt;
    ));
    console.log(todoComponents);
  
      return(
          &lt;div className=&quot;todo-list&quot;&gt;
            
              &lt;todoComponents /&gt;,
            
          &lt;/div&gt;
      )
  }
  export default App;
  </code></pre>
  <p>todoData.js:</p>
  <pre><code>const todosData = [{
          id: &quot;1&quot;,
          text: &quot;Take out the trash&quot;,
          completed: true,
      },
      {
          id: &quot;2&quot;,
          text: &quot;Grocery Shopping&quot;,
          completed: false,
      },
      {
          id: &quot;3&quot;,
          text: &quot;Clean Garage&quot;,
          completed: false,
      },
      {
          id: &quot;4&quot;,
          text: &quot;Mow Lawn&quot;,
          completed: false,
      },
      {
          id: &quot;5&quot;,
          text: &quot;Catch up on courses&quot;,
          completed: false,
      },
  ];
  export default todosData;
  </code></pre>
  <p>Error screen with 'todoComponents' starting with lowercase 't'. Next screen will show errors when using uppercase T instead.</p>
  <p><a href="https://i.stack.imgur.com/fdPw2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fdPw2.png" alt="ref1" /></a></p>
  <p>app.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import TodoItem from &quot;./components/TodoItem&quot;;
  import todosData from &quot;./components/todosData&quot;
  
  function App() {
  
    const TodoComponents = todosData.map((todo) =&gt; (
      &lt;TodoItem  key={todo.id} todo={todo.text} /&gt;
    ));
      
    console.log(TodoComponents);
  
      return(
          &lt;div className=&quot;todo-list&quot;&gt;
            
              &lt;TodoComponents /&gt;,
            
          &lt;/div&gt;
      )
  }
  export default App;
  </code></pre>
  <p><strong>Error screen 2</strong></p>
  <p><a href="https://i.stack.imgur.com/2uFvQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2uFvQ.png" alt="ref2" /></a></p>
  <p>Kindly ask if you need more info</p>