我没有在我的 React-app 中获得列表项

Question

I am new in React. I just created a React-app named TodoList. In my src/mycomponents, I have four files Header.js, Todos.js, TodoItem.js and Footer.js. I made some todolist and trying to show on display. But I am not getting any item. I am not getting any error. The Only problem I am facing is that I am not getting any list item.

My App.js

import "./App.css";
import Header from "./MyComponents/Header";
import {Todos} from "./MyComponents/Todos";
import Footer from "./MyComponents/Footer";
import {TodoItem} from "./MyComponents/TodoItem";

function App() {
  let todos = [
    {
      sno:1,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:2,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:3,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    }
  ]
  return (
    <>
      <Header title="My Todos List"/>
      <Todos todos={Todos}/>
      
      
    </>
  );
}

export default App;

'''

My Todos.js

import React from 'react'
import {TodoItem} from "../MyComponents/TodoItem";


export const  Todos = (props) =>{
    return (
        <div className="container">
            <h3> Todos List</h3>
            <TodoItem todo={props.todos[0]}/>
        </div>
    ) 
}

My TodoItem.js

import React from 'react'

export const TodoItem = (todos) => {
    return (
        <div>
            <h4>{todos.title}</h4>
            <p>{todos.desc}</p>

        </div>
    )
}

Tell me if code of any other file requires. I have attached the screenshot. Thank you in advance.

Answer 1

You have couple of typing mistakes in your code.

1. You are passing capital Todos instead of todos

<Todos todos={todos}/>  // pass correct todos list here

2. In your TodoItem file you need to extract props correctly

import React from 'react'

export const TodoItem = ({todo}) => {
    return (
        <div>
            <h4>{todo.title}</h4>
            <p>{todo.desc}</p>
        </div>
    )
}

Note: Since you are passing first todo item from Todos file, this will render only one todo item. If you want to render all todo list you need to change code like below:-

Todos.js

import React from 'react'
import {TodoItem} from "../MyComponents/TodoItem";


export const  Todos = ({todos}) =>{
    return (
        <div className="container">
            <h3> Todos List</h3>
            <TodoItem todos={todos}/>
        </div>
    ) 
}

TodoItem.js

import React from 'react'

export const TodoItem = ({todos}) => {
    return (
        <div>
            {todos.map(todo => (
              <h4>{todo.title}</h4>
              <p>{todo.desc}</p>
            ))}
        </div>
    )
}