ReactJS add table rows

Question

I want an app.js that imports a component, that generates a row in a table for each element in an array.

import myRows from './myRows';
const myApp = ({ values}) => {
return (
   
    <div>
  <div>        
        {values.map((entry, index) => {
            return <myRows entry={entry} key={index}/>
        })}
    </div>
    </div>

)

} ...

const myRows = ({ entry}) => {
    return (

      **ROW ENTRY like row name = entry.name**


    )
}

...

Maybe I should create in the my App.js a table and create in the map function a row for each entry in values? Idk how to do that. I want a simple table where each row is created with each entry in values My idea is not working and mybe it is stupid and there are many better ways..

import myRows from './myRows';
const myApp = ({ values}) => {
return (
        <table>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                    </tr>
                </thead>
                <tbody>
                     {values.map((entry, index) => {
            return <myRows entry={entry} key={index}/>
        })}
                </tbody>
            </table> 
       
   

)

} ...

 const myRows = ({ entry}) => {
    return (

                    <tr>
                        <th>entry.name</th>
                        <td>entry.secondName</td>
                        <td>C</td>
                        <td>D1</td>
                        <td>entry.value22</td>
                        <td>E3</td>
                        <td>E4/</td>
                    </tr>


    )
}

...

What is the problem with this code ? I can already see that there is an error in your myRows component, you have to use brackets to access variables in the HTML, like this: <th>{entry.name}</th> — SCHYNS Anthony
– SCHYNS Anthony, Commented Aug 24, 2022 at 13:20

selected · Accepted Answer · 2022-08-24 13:18:51Z

1

Don't use index as key. Each entry should have a unique identifier; either an id or you can interpolate some values to create a unique key for each row (e.g key={${row.name}_${row.createdAt}}

const App = ({ array }) => {
  return <table>
    <tbody>
      { array.map(row => <Row data={row} key={row.id} />) }
    </tbody>
  </table>
}

const Row = ({ data }) => {
  return <tr>
    <td>{data.name}</td>
    <td>{data.created}</td>
    ...
  </tr>
}

answered Aug 24, 2022 at 13:18

selected

8722 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS add table rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related