I want to create table data from an array, and after 5 entries, create a new row. React - Javascript

JoePoh
April 5, 2023
227 views
0 votes
2 Answers

I have mapping function like this:

function MyFunction({rows}) {
        return(
        rows
        .map((info, index) => (
            <td key = {someNum}>
                <p>some info</p>
            </td>
        )));
}

and I want to add something that will create new rows after the index hits five:

function MyFunction({rows}) {
        return(
        rows
        .map((info, index) => (
            {(index+1 %5 === 0 || index === 0) && <tr>}
            <td key = {someNum}>
                <p>some info</p>
            </td>
            {(index+1 %5 === 0) && </tr>}
        )));
}

I can’t get it to work, any ideas?

I’ve tried a lot of different syntax inside those curly brackets, but cant seem to figure out how to do it.

Answers

I think you are missing a return statement

if you use arrow function like

const myFunction = () => doSomething(); // you don't need return

but if you use it like that

const myFunction = () => {
  return doSomething(); // you need return
}

In your case

   return(
        rows
        .map((info, index) => (
// here missing a return 
            {(index+1 %5 === 0 || index === 0) && <tr>}
            <td key = {someNum}> // 
                <p>some info</p>
            </td>
            {(index+1 %5 === 0) && </tr>}
        )));

const chunk = (arr, size) => 
    Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
       arr.slice(i * size, i * size + size)
);

const results = chunk(rows, 5);

return(
    results.map((array) => (
      <>
        <tr>
        {array.map((info) => (
           <td key = {someNum}>
              <p>some info</p>
           </td>
        ))}
        </tr>
      </>
   ))
)

Please signup or login to give your own answer.

Click here to cancel reply.

I want to create table data from an array, and after 5 entries, create a new row. React – Javascript

Answers