Question 184661 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React list elements does not render

Here I am trying to render my tasks’ titles in a list. But for some reason they don’t render. Here is the MyTasks component:

const MyTasks = (props) => {
  const tasks = [...props.tasks];
  console.log(props.tasks, "props.tasks");
  console.log(tasks, "tasks");
  console.log(tasks[0], "tasks[0]");
  return (
    <ListGroup className="mx-2 mt-4">
      {tasks.map((task) => {
        return <ListGroup.Item key={task.id}>{task.title}</ListGroup.Item>;
      })}
    </ListGroup>
  );
};

export default MyTasks;

I tried console.log inside the component but for some reason I can’t access the array elements but I can view the props.tasks array.

In my TaskLists component I am rendering the MyTasks component.

TaskLists component is using a useState hook for updating the tasks prop value of the MyTasks component but during the child component re-render I am not able to access the elements in the props.tasks array.

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const getTasks = () => {
  //code to get tasks data from data base
  setTasks(taskList);
};
  return (
    <ListGroup className="mx-2 mt-4">
      <MyTasks tasks={tasks} />
    </ListGroup>
  );
};

Here is my console.log screenshot, I cant access the array elements for some reason.

Tags:

3

Answers


  1. 0

    props.tasks.indexOf(i) is attempting to return the index of the element i, however i itself is the index! Instead, try using element.id as suggested in the comment above.

    Login or Signup to reply.
  2. 0

    Can you please try to console.log inside the foreach, so verify first the values you are getting inside the loop. If you can get then it should print, otherwise you will get to know where is the issue.

    Login or Signup to reply.
  3. 0

    The code you provided seems to be a React component called MyTasks. It appears that you’re trying to render a list of task titles using the props.tasks array. However, you mentioned that the task titles are not rendering.

    Here are a few suggestions to troubleshoot the issue:

    1. Check if props.tasks is correctly passed to the component: Make sure you’re passing the tasks prop to the MyTasks component correctly from its parent component.

    2. Verify the data structure of props.tasks: Ensure that props.tasks is an array of objects and each object has a title property. You can use console.log to inspect the props.tasks data structure and verify if it matches your expectations.

    3. Ensure the component is being rendered: Double-check that the MyTasks component is being rendered in the parent component’s JSX code. Without rendering the component, its logic won’t be executed.

    4. Verify if the props.tasks array is empty: If the props.tasks array is empty, the forEach loop won’t execute, and no list items will be added to the list array. Make sure the props.tasks array contains the necessary data.

    5. Check for any errors in the console: Look for any error messages in the browser’s console that might indicate the source of the problem.

    By examining these points, you should be able to identify the issue and resolve it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search