React Table Multiple Div

Question

I want to display Time Data in a Table with a Linebreak after each.

I have an array with the Times Recorded (e.g. 08:00, 12:00, ...)

Now I map this array and call another component which returns a div with the Data this works fine but it displays all data in one line.

Is there a way to break the Line after each Time?

{data.map((times) => (
                                    <tr key={times.id}>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{times.date}</td>
                                        <td id="times" className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {
                                                <TestDiv time={times.times}/>
                                            }
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,5h</td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1,10</td>
                                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" className="text-indigo-600 hover:text-indigo-900">
                                                Bearbeiten
                                            </a>
                                        </td>
                                    </tr>
                                ))}

Component:

import React from "react";


const TestDiv = ({time}) => {
    return(
        <div>{time} <br/> </div>
    )
}

export default TestDiv;

thanks!

Answer 1

as times.times is an array you need to iterate it and use pre tag html and "\n" to make a new line and the complete version is here in codesandbox:

const TestDiv = ({ time }) => {
  return (
    <pre>
      {time.map((t) => t + "\n")} <br />
    </pre>
  );
};