i'm trying to render a useHook statement in React that just display the length of the array and nothing getting render.

Here is APP.js

import React, { useState } from 'react'
import TodoList from './TodoList'

function App() {
  const [todos, setTodos] = useState(['test1', 'test2'])
  return (
    <>
      <TodoList todos={todos} />
      <input type="text" />
      <button>Add Todo</button>
      <button>Clear Completed Todos</button>
      <div>0 left to do</div>
    </>
  )
}

export default App;

Here TodoList.js

import React from 'react'

export default function TodoList(todos) {
    return (
        <div>
            {todos.length}
        </div>
    )
}

Here index.js

    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Screenshot of what getting render

screenshot

CodePudding user response：

Try this methods

import React from 'react'

export default function TodoList({todos}) {
    return (
        <div>
            {todos.length}
        </div>
    )
}

Problem in your code is that your todos is using as components props

CodePudding user response：

Change the TodoList Component to this,

import React from 'react'

export default function TodoList({todos}) {
    return 
        <div>
            {todos.length}
        </div>
    )

or

import React from 'react'

export default function TodoList(props) {
    return (
        <div>
            {props.todos.length}
        </div>
    )

Just remember you receive props in the form of an object, so you can either de-structure it or use dot notation or bracket notation to access the peops you pass to a component