I am iterating through an array of objects. I want my title and type to be in the same div, but on different lines. For instance:

Clean

Housekeeping

Currently, I have something like: Clean Housekeeping

How can I change my css to achieve this. Here's my code:

todolist.jsx

import React from "react";
import "./TodoList.scss";

const TodoList = ({ todos = [] }) => {
  return (
    <div>
      {todos.map((todo) => (
        <ul>
          <li className="todo-list" key={todo.id}>
            {todo.title}
            {todo.type}
          </li>
        </ul>
      ))}
    </div>
  );
};
export default TodoList;

TodoList.scss

.todo-list {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  margin: 10px;
  border: 1px solid #ccc;
}

CodePudding user response：